CSS Transitions and Animations - CSS: The Definitive Guide (2017)

CSS: The Definitive Guide (2017)

Chapter 9. CSS Transitions and Animations

CSS transforms, CSS transitions, and CSS animations are three separate CSS specifications. While the three terms sound like they may do the same thing—make something move—CSS transitions and animations make things move over time. Transitions and animations let you define the transition between two or more states of an element.

Transforms change an element’s appearance through translation, rotation, scaling, and skewing, but do not have a time component. You can use the CSS transform property to change the location of an element’s coordinate space of the CSS visual formatting model, but you need transitions or animation to make that change occur over time. The transform property is covered in Transforms in CSS (O’Reilly).

While animation is possible with JavaScript, understanding CSS3 transitions and animations will save you a lot of time and effort if you need to animate anything on the Web. Generally, it will also save your users’ CPU and battery compared to JavaScript.

Used correctly, CSS animations and transitions can give your web applications life and depth. While this booklet focuses on how to transition and animate elements in your documents, understanding when to use animation can improve your user experience (UX) as well. By adding the dimension of time, animating can help your UX communicate on a different level.

12 Basic Principles of Animation

Well before the advent of the Web, animators at Disney came up with 12 principles for cartoon animation. Some of these principles are very relevant to CSS animation as well.

According to the “bible of animation”—The Illusion of Life: Disney Animation by Frank Thomas and Ollie Johnston—there are 12 basic principles for animation, including:

Squash and stretch

Depending on what something is made of, objects deform under motion. Squashing and stretching gives the illusion of weight and volume to an object or character as it bounces or otherwise moves. For example, when a ball bounces, it’s squashed as it hits the ground and stretches as it heads upward.

Anticipation

Users may not understand an animation unless there is a sequence of actions that leads clearly from one activity to the next. They must anticipate or expect a change before it actually occurs. In cartoons, it’s a movement preparing the viewer for a major action the character is about to perform, like a knee bending before a jump. On the Web, it could be a button depression before the start of the more extensive animation that starts when the button is selected.

Guide your users mentally to where they should focus before initiating the main effect, especially if the start of the animation is important.

Staging

In a cartoon, staging is the presentation of an idea so it is unmistakably clear. On the Web, staging is directing the user’s attention to an action, such as a small jiggle of the call-to-action button. Staging helps guide users through the story or idea being told: for example, through the steps of a check-out process.

Straight ahead action and pose to pose

There are two main approaches to animation on the big screen. In the straight ahead action approach, the animator starts at the first drawing and works drawing to drawing to the end of a scene. In pose to pose, the animator draws the main points within an animation and creates (or has an assistant create) the points in between later. While seemingly only applicable to storyboarding, this principle is also related to drawing keyframes and how the animation fills in the space or time between them.

With CSS animations, when we animate image sprites to create motion, we are emulating the Straight Ahead approach. This is described when we cover the steps values of the animation-timing-function property (see “The step timing functions”). In most animation scenarios, we let the browser be our assistant, defining specific points, or poses, within the animation and allowing the browser to interpolate property values as it animates from pose to pose, or keyframe definition to keyframe definition.

Follow-through and overlapping action

Follow-through is the inclusion of additional motion when the main animation concludes. For example, if a character is running and stops, her hair and clothes were likely bouncing and fall back into place after her legs and body cease moving, catching up to the main mass of the character. Nothing stops all at once.

Overlapping action is when some components are slightly delayed after other components change direction, like the way Wile E. Coyote’s legs keep moving forward as he drops off a cliff. His ears take a moment to follow.

If your CSS animations ever become complex enough to require follow-through and overlapping action, timing will be critical to making your effects work.

Slow in and slow out

Just like cars don’t start and end at full speed—rather, they accelerate from stopped to full speed and decelerate back to zero—slow ins and slow outs make animation more lifelike and soften the action. Only mechanical animations will proceed at a linear speed.

The slow in and slow out principle states that the beginning and end of an animation are more interesting than its middle; and therefore, unless it’s mechanical, the animation should proceed fastest in the middle of the animation, with a slower start and slower end. With cartoon animation, the effect is created by having more cells at the ends and fewer in the middle of the action. With CSS, this effect is created by setting cubic Bézier timing functions to something other than linear (see “The transition-timing-function Property”).