Courses/HTML & CSS/Animations & Transitions

CSS Animations & Transitions

Lesson 11 • Intermediate Track

What You'll Learn

CSS transitions for smooth state changes

CSS transforms: translate, scale, rotate, skew

@keyframes for complex multi-step animations

Animation timing functions and easing curves

Popular animation patterns: fade, slide, pulse, spin

Performance tips for smooth 60fps animations

💡 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`

transition: property duration timing-function delay;

CSS Transitions

Hover over elements to see smooth transitions

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transitions</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 30px;
      color: #e5e7eb;
    }

    h3 { color: #22c55e; margin: 25px 0 10px; }

    .box {
      width: 150px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-weight: bold;
      cursor: pointer;
      margin: 10px 0;
    }

    /* Color t
...

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	What It Does	Example
`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.

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.element {
  animation: bounce 1s ease infinite;
}

@keyframes Animations

See different animation patterns in action

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Keyframe Animations</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 30px;
      color: #e5e7eb;
    }

    h3 { color: #22c55e; margin: 30px 0 10px; }

    .demo {
      display: flex;
      gap: 20px;
      align-items: center;
      min-height: 100px;
    }

    .box {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      just
...

4. Animation Properties Reference

Property	Values	What It Does
`animation-name`	Name of @keyframes	Which animation to play
`animation-duration`	0.5s, 2s, 300ms	How long one cycle takes
`animation-timing-function`	ease, linear, ease-in-out	Speed curve / easing
`animation-delay`	0s, 0.5s, 1s	Wait before starting
`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

animation: name duration timing-function delay iteration-count direction fill-mode;

5. Practical: Animated Button & Loading Spinner

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

Animated Button & Spinner

Professional hover effects and a pure CSS loading animation

Try it Yourself »

Code Preview

<!DOCTYPE html>
<html>
<head>
  <title>Animated Button & Spinner</title>
  <style>
    body {
      background: #0f172a;
      font-family: system-ui, sans-serif;
      padding: 40px;
      color: #e5e7eb;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 50px;
    }

    /* ANIMATED BUTTON */
    .btn {
      padding: 14px 40px;
      font-size: 1.1rem;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      colo
...

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

CSS Animations & Transitions

What You'll Learn

💡 Think of It Like This

1. CSS Transitions

CSS Transitions

2. CSS Transforms

3. @keyframes — Multi-Step Animations

@keyframes Animations

4. Animation Properties Reference

5. Practical: Animated Button & Loading Spinner

Animated Button & Spinner

6. Animation Performance Tips

⚠️ Common Mistakes

🎉 Lesson Complete

Cookie & Privacy Settings