CSS: Animation

Learn how to create simple CSS animations such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.

Introduction

• CSS animation advantages

1. Overview of CSS Transitions and Transforms

• CSS transform basics
• Simple 3D transforms
• CSS transitions
• Challenge: Adding a transition
• Solution: Adding a transition

2. Understanding CSS Animations

• 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

3. CSS Animation Building Blocks

• 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

4. Animating SVGs with CSS

• Preparing an SVG for animation
• SVG exporting and optimization settings
• Animating SVG with CSS

5. Advanced CSS Animation Techniques

• 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

6. Tools for Creating CSS Animations

• Using browser animation inspection tools

Conclusion

• Helpful online tools for CSS