Overview
-
Learn how to create simple CSS animations such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.
Syllabus
-
Introduction
- CSS animation advantages
- CSS transform basics
- Simple 3D transforms
- CSS transitions
- Challenge: Adding a transition
- Solution: Adding a transition
- CSS keyframe animation fundamentals
- animation-delay and animation-fill-mode
- A closer look at animation-fill-mode
- animation-direction
- Timing functions and easing
- The steps() timing function
- Challenge: Adding keyframes to an animation
- Solution: Adding keyframes to an animation
- Infinitely looping animations
- Pause and play with animation-play-state
- Animating 3D transforms
- Chaining multiple keyframe animations
- Challenge: Adding a third animation to the chain
- Solution: Adding a third animation to the chain
- Preparing an SVG for animation
- SVG exporting and optimization settings
- Animating SVG with CSS
- Creating a motion path for CSS with offset-path
- Animating CSS motion path with offset-path
- Dynamic CSS animation with CSS variables
- Animating variable fonts with CSS
- Using browser animation inspection tools
- Helpful online tools for CSS
