CSS: Animation

Course details

In recent years, web animation has grown into a powerful option for enhancing user experience on the web, and CSS animation has become a core skill for web designers and developers. In this course, Val Head leads you through the CSS animation skills you need to bring motion into your interactive projects. Val introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill-mode, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, optimizing animation performance, best uses for CSS animations right now, and the current level of support and performance and how we can expect that to change in the future. Val presents the lessons as a short series of building block animations—common things you might want to do with animations—then puts those techniques together in a small project of an animated infographic so you can see them all in action.

Concepts

0. Introduction

01 - CSS animation advantages
02 - Using GitHub Codespaces with this course

1. Overview of CSS Transitions and Transforms

03 - CSS transform basics
04 - Simple 3D transforms
05 - CSS transitions
06 - Challenge - Adding a transition
07 - Solution - Adding a transition

2. Understanding CSS Animations

08 - CSS keyframe animation fundamentals
09 - animation-delay and animation-fill-mode
10 - A closer look at animation-fill-mode
11 - animation-direction
12 - Timing functions and easing
13 - The steps() timing function
14 - Challenge - Adding keyframes to an animation
15 - Solution - Adding keyframes to an animation

3. CSS Animation Building Blocks

16 - Infinitely looping animations
17 - Pause and play with animation-play-state
18 - Animating 3D transforms
19 - Chaining multiple keyframe animations
20 - Challenge - Adding a third animation to the chain
21 - Solution - Adding a third animation to the chain

4. Animating SVGs with CSS

22 - Preparing an SVG for animation
23 - SVG exporting and optimization settings
24 - Animating SVG with CSS

5. Advanced CSS Animation Techniques

25 - Creating a motion path for CSS with offset-path
26 - Animating CSS motion path with offset-path
27 - Dynamic CSS animation with CSS variables
28 - Animating variable fonts with CSS

6. Tools for Creating CSS Animations

29 - Using browser animation inspection tools

Conclusion

30 - Helpful online tools for CSS