Animations

CSS animations bring elements to life over time: transition smoothly interpolates a property between two states (like a hover), while @keyframes with the animation property defines multi-step sequences that can loop, all without JavaScript.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

💡 Think of It Like This

Transitions are like a light dimmer switch: You set a starting state and an ending state, and the browser smoothly transitions between them. A light switch is instant (on/off), but a dimmer gradually changes brightness — that's what CSS transitions do for properties like colour, size, and position.

Animations are like a movie: You define a sequence of frames (@keyframes) and the browser plays them in order, potentially looping forever. Much more powerful than simple transitions.

1. CSS Transitions

Transitions animate the change from one CSS value to another. You define what to animate, how long it takes, and the timing curve .

Property

What It Does

Example

transition-property

Which property to animate

background, transform, all

transition-duration

How long the animation lasts

0.3s, 500ms

transition-timing-function

Speed curve (easing)

ease, linear, ease-in-out

transition-delay

Wait before starting

0s, 0.2s

2. CSS Transforms

Transforms change an element's shape, size, position, or rotation without affecting the page layout . They're GPU-accelerated, making them the fastest way to move things on screen.

Transform

translate(x, y)

Moves element horizontally/vertically

translateX(50px)

scale(x, y)

Resizes element (1 = normal)

scale(1.5)

rotate(angle)

Rotates clockwise

rotate(45deg)

skew(x, y)

Tilts/slants element

skewX(15deg)

💡 Pro Tip: You can combine multiple transforms: transform: translateX(50px) rotate(10deg) scale(1.1);

3. @keyframes — Multi-Step Animations

While transitions only go from A to B, @keyframes lets you define any number of steps (A → B → C → D...) and control the timing of each.

4. Animation Properties Reference

Values

animation-name

Name of @keyframes

Which animation to play

animation-duration

0.5s, 2s, 300ms

How long one cycle takes

animation-timing-function

Speed curve / easing

animation-delay

0s, 0.5s, 1s

animation-iteration-count

1, 3, infinite

How many times to repeat

animation-direction

normal, reverse, alternate

Play forward, backward, or both

animation-fill-mode

none, forwards, backwards, both

Keep end state after finishing

5. Practical: Animated Button & Loading Spinner

Let's build two common real-world patterns — a professionally animated button and a CSS-only loading spinner:

6. Animation Performance Tips

Not all CSS properties animate equally well. For smooth 60fps animations, stick to properties that are handled by the GPU:

✅ Fast (GPU)

❌ Slow (causes reflow)

transform

width / height

opacity

top / left / right / bottom

filter

margin / padding

💡 Golden Rule: Instead of animating top or left , use transform: translate() . Instead of animating width , use transform: scale() .

⚠️ Common Mistakes

• Animating width/height instead of transform — Width/height changes force the browser to recalculate layout for every frame, causing jank. Use transform: scale() instead.
• Too many animations at once — Animating 50 elements simultaneously will drop frame rates. Be selective — one or two well-placed animations are more effective than many.
• Forgetting animation-fill-mode: forwards — Without it, elements snap back to their original state after the animation ends. Add forwards to keep the end state.
• Animations that never stop — Infinite animations consume CPU/battery. Only use infinite for loading spinners or subtle background effects.
• No reduced-motion support — Some users get motion sickness. Add @media (prefers-reduced-motion: reduce) to disable animations for those users.

🎉 Lesson Complete

You now know how to bring your web pages to life with CSS animations. Key takeaways:

• ✅ Transitions animate between two states (hover, focus, active)
• ✅ Transforms move, scale, rotate, and skew elements efficiently
• ✅ @keyframes create multi-step, looping animations
• ✅ Animate transform and opacity for smooth 60fps performance
• ✅ Use animation-fill-mode: forwards to keep the end state
• ✅ Respect prefers-reduced-motion for accessibility

Practice quiz

Continue this course

• Previous: Responsive Design
• Next: Advanced CSS Selectors