CSS - Animations

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–18 minutes

Keyframe animations create rich, multi-step motion. Use them sparingly and accessibly.

Learning Objectives

• Define keyframes and apply animation properties.
• Respect user motion preferences.

Details & Examples

@keyframes pulse{ 0%{ transform: scale(1) } 50%{ transform: scale(1.05) } 100%{ transform: scale(1) }}
.pulse{ animation: pulse 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .pulse{ animation: none; }
}

Try it

Common Pitfalls

• Animating layout-affecting properties is expensive; prefer transform/opacity.

Checks for Understanding

1. How do you pause an animation on hover?

Exercises

1. Create a keyframe animation for a loading indicator that respects prefers-reduced-motion.
2. Animate a card entrance with opacity and transform, ensuring only transform/opacity are animated.