Creating Web Animations

Chapter 6. Transitions, Animations, and JavaScript

So far, while learning the basics of how CSS animations and transitions work, we haven’t deviated too far from the safe middle road. We loaded the page, and an animation automatically started to play. We hovered over an element, and some property on that element animated in some way. The middle road is fine for many cases, but there is so much more we can do. In this chapter, we are going to take some less beaten paths and expand the ways we can interact with animations and transitions by adding in a dash of JavaScript.

By adding JavaScript, we can start to do a lot more things, such as:

• Having our animations play at a time other than during page load or in response to simple gestures like hover, focus, and so on.
• Defining the properties we animate, their values, or both on the fly as opposed to having them always be predefined in our CSS.
• Having the element whose properties we animate be wildly different than the element we trigger the animation on.

These are all situations that you’ll run into frequently, and they also are situations that you simply can’t bring to life using only CSS. You need to involve JavaScript, and this chapter will show you some of the ways you can do that. Also, don’t worry if you are not a JavaScript expert. We’ll stay out of the complex stuff as much as possible, but we will review a few key JavaScript concepts that you will see over and over again as you go about creating animations.

It’s Just ...