CSS transitions offer you a way to create simple animations that always start as the result of triggering a CSS property change. Transitions can animate only between a start and end state, and each state is controlled by existing CSS property values. For example, a transition that runs on hover transitions between values on the element and values on the hover state of the element. Overall, transitions are a simple way to animate but offer little control over the animation.
CSS animations provide a bit more control. They allow for the creation of multiple keyframes (FIGURE 4.1) over which the animation occurs. While they can start in reaction to a change in CSS property value, they can also run on their own. An animation executes as soon as the animation property is applied.
FIGURE 4.1 Animation keyframes
Transitions don’t change property values; they define how the change occurs. Animations can change property values inside each keyframe.
Transitions change implicitly. You define things at the start and end states, and you leave it to the browser to determine all the intermediate states. Animations change explicitly. The animation can define start and end states as well as some intermediate states. The browser still determines the intermediate states between keyframes, but the animation gets to define as many keyframes as it wants.
All the things you could change when working with transitions, you can still change when working with animations. You determine how long the animation lasts and what timing-function to use between keyframes. You also get to delay the animation if you like.
In addition, you can decide how many times the animation should run and in which direction it should run. You can set the animation to be running or paused. You can even determine which CSS property values apply outside the time frame in which the animation runs.
Animations have other benefits over transitions as you’ll see in this chapter. In general, these benefits are about giving you more control. Transitions have advantages over CSS animations, too. In general, they’re about the simplicity of transitions.
Browser support for CSS animations is good. It’s similar to what you saw earlier for transforms and transitions. CSS animations work in all modern browsers. In IE10 and newer, Firefox, and IE Mobile, no vendor prefixes are needed.
Safari, Chrome, Opera, iOS Safari, Android Browser, and Blackberry Browser all use the -webkit vendor prefix, so you have only the one prefix to deal with. The animation-fill-mode property isn’t supported in Android below version 2.3. In iOS 6.1 and earlier, animations aren’t supported on pseudo-elements.
Detecting Browser Support
Another option, and the one I recommend, is to treat CSS animations as part of the noncritical experience. Use animations to enhance the design and the design’s aesthetic, but make sure nothing breaks in browsers that don’t support CSS animations. Your site should still work in any browser that doesn’t support animations, but it can provide a more enjoyable experience for those that can.
Note that while CSS animations work in modern browsers, you don’t necessarily see the same smoothness. A smooth-running animation in one browser might look a bit jerky in another, and it’s not always the same browsers looking smooth or not. It depends on the browser and the specifics of the animation.