The Benefits of Using CSS Animations
This chapter is from the book
This chapter is from the book
This chapter is from the book
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
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.
As you probably expect by this point, the holdouts are Opera Mini and IE9 and earlier. Unfortunately, there’s no polyfill like there was for transforms and transitions. The fallback is to create the animation using JavaScript: You first check to detect CSS animation support and then use one of the available JavaScript libraries for working with animation.
JavaScript animation is beyond the scope of this book, but the following section gives you to a few places where you can find more information.
Detecting Browser Support
Here are some resources for detecting support as well as some JavaScript animation libraries:
- https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support
Finding JavaScript Libraries for Animation
The most popular library is—without doubt—jQuery, although it’s not the most performant way to create animations with JavaScript. Here are some other options:
- http://api.jquery.com/animate
- www.polymer-project.org/platform/web-animations.html
- https://github.com/web-animations/web-animations-js
- http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36
You could create animations for every browser using JavaScript and ignore CSS animations completely. If you’re using JavaScript to create the animation for some browsers, why not use JavaScript for all browsers and not worry so much about CSS animation support? CSS animations are usually, though not always, more performant than the same animation in JavaScript.
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.