Web browsers have the ability to display stunning CSS animations and transitions. Learn how you can use CSS Animations and Transitions to enhance your web applications with powerful, information-rich motion and color. CSS is one of the most performant ways to animate today and this course gives developers the future-facing tools they need to do just that. Rich with fun example code, demonstrations, and lectures, there’s a great mix here for people of all learning styles.
Master the tools you need to set your ideas in motion on the web!
Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.
00:00 - 04:06
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.
04:07 - 11:49
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.
11:50 - 16:06
Exercise 1: Rolling a Ball
In this first exercise, Rachel demonstrates how to create a rolling ball with multiple CSS transitions.
- 16:07 - 20:18 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.
- 20:19 - 23:40 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.
- 23:41 - 36:42 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.
- 36:43 - 40:49 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.
40:50 - 50:29
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
50:30 - 55:08
Exercise 2: Applying Physics to the Ball
In this exercise, you will use different easing and durations to add physics to the ball animation.
- 55:09 - 01:00:52 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.
- 00:00 - 04:06 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.
- 01:00:53 - 01:06:28 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.
- 01:06:29 - 01:12:03 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.
01:12:04 - 01:13:53
Exercise 3: Making a Walk-Cycle
In this exercise, you will use a sprite sheet to create a walk-cycle animation.
- 01:13:54 - 01:21:09 Exercise 3 Solution Rachel walks through the solution to exercise 3.
- 01:21:10 - 01:29:25 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.
01:29:26 - 01:30:20
Exercise 4: Wag the Cat
In this exercise, you will make the cate wag it’s tail using the advanced CSS animation properties.
- 01:30:21 - 01:32:52 Exercise 4: Solution Rachel walks through the solution to exercise 4.
- 01:32:53 - 01:38:49 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
- 01:38:50 - 01:46:03 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.
- 01:46:04 - 01:52:57 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.
- 01:52:58 - 02:02:45 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.
- 02:02:46 - 02:08:23 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.
02:08:24 - 02:12:50
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.
- 02:12:51 - 02:17:01 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.
02:17:02 - 02:17:48
Exercise 5: Sensing Visual Play Readiness
In this exercise, you will show and hide elements using a .loading class.
- 02:17:49 - 02:27:00 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.
02:27:01 - 02:31:02
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.
- 02:31:03 - 02:39:24 Exercise 6 Solution Rachel walks through the solution to exercise 6.
- 02:46:35 - 02:51:01 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.
02:51:02 - 02:53:28
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.
03:03:49 - 03:05:16
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.
- 03:05:17 - 03:08:03 Exercise 8: Solution Rachel walks through the solution to exercise 8.
03:14:16 - 03:23:42
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.
03:23:43 - 03:27:41
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.
- 03:27:42 - 03:32:12 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.
- 03:32:13 - 03:42:12 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.
- 03:42:13 - 03:50:52 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.
- 03:50:53 - 04:01:33 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.
- 03:14:16 - 03:23:42 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.