Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's talk about animation. These days we have almost an embarrassment of riches with respect to techniques we can use to animate elements on the page. The most popular these days are probably CSS3 animation and jQuery. So let's compare them a little bit. The syntax that you use to do animations in CSS and in jQuery are fairly different of course, they're totally different technologies, but the results can be similar depending on what you want to do. One thing that's important to note is that CSS uses keyframes in a lot of it's animations. So if you're familiar with using keyframes from other animation techniques you've used in the past, you might be very comfortable using CSS.
But if you're supporting say, older versions of Internet Explorer or the like you'll find that you probably have to use jQuery because those features just aren't supported in the older browsers. One thing that jQuery has over CSS is that, it can respond to any kind of event and then trigger an animation. CSS can't do that, except in a very limited set of events, like hover. However, you can trigger CSS animation from jQuery. So you could build up an animation using a set of key frames, or whatever you want, in your CSS, and then use jQuery to trigger say, adding a class, or something like that, to get the animation to play.
Another advantage that jQuery has, is that it can be extended via plugins, and of course you can write your own custom animations if you're an advanced programmer. So, the two techniques to building up animations are fairly different but they can play nice together. So, this is not an either or proposition. For the next several movies, we're going to be looking entirely at animating just using jQuery. But if you're interested in more about CSS animation, I'd recommend looking at CSS Transitions and Transforms and CSS Animations, both of which are here on lynda.com. And of course we'll be just scratching the surface of what you can do in terms of jQuery animations in this course.
But you can look throughout the lynda.com library for much more on jQuery animations in the HTML5 project series and many other places.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66014 Viewers
61 Video lessons · 96626 Viewers
56 Video lessons · 110343 Viewers
82 Video lessons · 105125 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.