This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Table of Contents
CSS Transitions
Introduction
Rachel Nabors begins her course on web animation by introducing herself and highlighting some of her recent animation projects. Rachel also outlines the scope of the course and talks about the tools she will be using. - webanimationweekly.com
CSS Transitions
CSS transitions describe how a property should display change when given a different value. Transitions specify the targeted property, duration, delay, and the timing function to be used during the transition.
Exercise 1: Rolling a Ball
In this first exercise, Rachel demonstrates how to create a rolling ball with multiple CSS transitions.
Transitioning Multiple Properties
The easiest way to transition multiple properties is to use “all” as the property to be transitioned. This can have unintended side effects since every property change will be transitioned and each transition will have the same duration. Instead, Rachel demonstrates how to use the transition property to create a comma-delimitated list of transitions - each with their own duration and delay.
Demonstration: Changing the Ball’s Color
Rachel spends a few minutes demonstrating how to transition the color of the ball in the previous exercise from one color to another. She also talks briefly about optimizing the animation by adjusting when multiple animations are running.
Duration
Citing work by Jakob Nielson, Rachel talks about transition duration and the user’s perceived experience given different delays and durations. For example, 100 milliseconds will appear instantaneous. On the other hand, an animation longer than 10 seconds can leave the user feeling disconnected. After sharing a few example, Rachel gives her recommendations for animation timing.
Browser Developer Tools
Rachel introduces the developer tools in both Firefox and Chrome. She demonstrates how they can be used to play, pause, and adjust the speed of animations running in the browser. Rachel will take a more in-depth look at the developer tools later in the course.
Timing Functions
In animation, easing or cushioning describes an animation’s rate of change over time. CSS transitions include a transition-timing-function property which allows developers to specify the type of easing to apply to the transition. Rachel uses the websites cubic-bezier.com and easings.net to better demonstrate the various timing functions. - cubic-bezier.com , easings.net
Exercise 2: Applying Physics to the Ball
In this exercise, you will use different easing and durations to add physics to the ball animation.
CSS Transitions Summary
Rachel wraps up her discussion on CSS transitions by talking about browser support. She also shares a few summarizing points about the advantages of using CSS transitions and answers a few audience questions.
CSS Animations
CSS Animations
CSS animations change one or more CSS properties through the use of keyframes. Keyframes can be specified using the “from” and “to” keywords or by percentages. Changes between keyframes are animated by the browser. After introducing CSS animations, Rachel explains some of the differences between animations and transitions.
Sprite Animation with CSS
An image containing multiple frames or cells of an animation is often referred to as a sprite sheet. Sprite sheets are animated by showing each cell one after another like a flip book. Rachel talks about how the steps() timing function can be used to create a sprite animation with CSS.
Exercise 3: Making a Walk-Cycle
In this exercise, you will use a sprite sheet to create a walk-cycle animation.
Exercise 3 Solution
Rachel walks through the solution to exercise 3.
Advanced Animation Properties
Rachel talks about a couple properties that can be used to create more advanced animations. The animation-fill-mode property specifies how the element will look before the animation starts or after the animation ends. The animation-play-state can be used to pause or resume the animation. Lastly, the animation-direction indicates the direction in which the animation plays.
Exercise 4: Wag the Cat
In this exercise, you will make the cate wag it’s tail using the advanced CSS animation properties.
Exercise 4: Solution
Rachel walks through the solution to exercise 4.
CSS Animations Summary
Rachel wraps up her discussion on CSS animations by looking at browser support. She also outlines the advantages of CSS animations and answers some audience questions.
Animation in Design
Stateful Transitions & Supplemental Animations
Rachel begins a short section discussing different animation design patterns. Stateful transitions are great for highlighting a change in the task-flow location or indicating where you have been. The entrance animation of a modal dialog would be an example of a stateful transition. Supplemental animations indicate important details that shouldn’t be overlooked or different possibilities presented to the user.
Causal Effects and Decorative Animations
Causal effects indicate when an action or element has caused something else to happen. For example, a loader or spinner animation indicates when an image or video has begun loading. On the other hand, decorative animations like a button’s hover effect don’t add any value to the content and are typically unnecessary in the overall user experience.
Jump Cuts and In-Betweening
Rachel pulls a couple examples from film editing and applies them to user interface design. A jump cut is a sharp transition. Typically there isn’t any animation involved and the result is immediate. “In-betweening” is the technique of adding animation to clue the user into where an element came from and help set the expectations of the user interface.
Drawing Attention
A user’s eyes tend to focus on the center of the page. Animation is a tool to help focus the user’s attention to a specific task at hand. Rachel discusses how to use animation to draw attention. She also cautions that if too many elements are competing for attention, the user may not know where their focus should be.
Animation Design Summary
Using the band website http://www.alovelikepi.com , Rachel summarizes the various animation design patterns discussed in this section. She also spends a few minutes answering some audience questions.
Stateful Animations
Static vs. Dynamic Animations
Static animations are the easiest to create. An element animates from one state to another. Both states are predetermined and predictable. Dynamic animations, however, are typically triggered by some event or user interaction. The resulting animation could have a different outcome each time it runs. Rachel demonstrates these differences and explains how the combination of static and dynamic animations can lead to stateful animations.
Exercise 5: Sensing Visual Play Readiness
In this exercise, you will show and hide elements using a .loading class.
Exercise 5 Solution
Rachel walks through the solution to exercise 5. She also shares a real-world example where she used CSS classes to manage state.
Exercise 6: Falling up the Hole
In this exercise, you will use the skrollr.js library to make Tuna “fall” up the hole past Alice.
Exercise 6 Solution
Rachel walks through the solution to exercise 6.
Managing State
Rachel spends a few minutes talking about why it’s important to consider state management when building complex web animations. Mixing CSS animations with JavaScript-driven state management can be difficult. It’s often easier to handle the animations in JavaScript. Rachel shares a few libraries she likes using for handling state.
Sequencing
After answering a couple audience questions, Rachel introduces sequencing or “animation stacking”. Sequencing is the process of putting a delay on the second animation so it won’t run until after the first animation is completed.
Exercise 7: Sitting Tuna Down
In this exercise, you will use the animation-delay property to start a sitting animation after the walking animation finishes.
Chaining Animations with Event Listeners
Animation stacking has it drawbacks. Individual segments cannot be looped and only one timing function can be applied. For more complex sequencing, Rachel recommends using the JavaScript animation API. The API includes events like animationstart, animationend, and animationiteration. These events can be used to trigger, modify, or sequence additional animations.
Exercise 8: Sitting Tuna Down with Event Listeners
In this exercise, you will use the animationend event to add the .sit class after Tuna is done walking.
Exercise 8: Solution
Rachel walks through the solution to exercise 8.
Stateful Animations Summary
Rachel spends a few minutes answering audience questions about the Stateful Animations section. She also shares some additional JavaScript animation events in the API documentation on the MDN website.
Performance
CSS Triggers
CSS properties that trigger the repainting of the page are the most costly to animation performance. The more repainting, the poorer the performance. Rachel talks about why the opacity and transform properties are best for animations and how they can be used in place for less performant properties.
Exercise 9: Walk the Cat….Again!
In this exercise you will find a way to walk the cat without using the expensive background positioning technique.
will-change Property
The will-change CSS property will off-load the rendering of animations and transitions to the GPU. This can increase the performance of the animation since their are often more resources on the GPU. While will-change is good for performance, it has limited support across browsers and its overuse can have the reverse affect.
Frames Per Second
Rachel explains the affect frame rate has on animation. Frame rate on the computer is different than frame rate on TV because computer animation frames lack motion blur to give the illusion of movement. Because of this, you often need to have computer-based animations run at a higher frame rate.
Paint Flashing and the Timeline
Two more browser developer tools that are useful when auditing performance are Paint Flashing and the Timeline. Paint Flashing displays the regions of the page that are being repainted by the browser. Since repainting can cause performance issues, this helps you identify where the browser’s resources are being used. The timeline allows you capture and analyze a webpage’s loading, scripting, rendering and painting over a period of time.
Course Wrap-up & Resources
Rachel wraps up the course with a brief Q&A with the audience. She also shares a few final resources for better understanding the developer tools and gives the audience a peek at what’s coming next in the Web Animation API.