🎬 Keyframe Animation Fundamentals

Animations vs. Transitions

You've already met CSS transitions, which smoothly interpolate a property between two states when something changes — a hover, a class toggle, a focus. Transitions are perfect for simple "A to B" moves, but they have limits: they need a trigger, they only describe a start and an end, and they can't loop on their own.

CSS animations lift all three limits. An animation can:

• run on its own, the moment an element appears — no trigger required;
• pass through many intermediate states, not just start and end;
• repeat, reverse, and alternate automatically, forever if you want.

💡 A useful analogy: A transition is a light switch on a dimmer — flip it and the room fades from dark to bright. An animation is a pre-programmed light show: it can pulse, cycle through colors, and loop all night without anyone touching the switch.

The Anatomy of an Animation

Every CSS animation is built from exactly two parts that work together:

1. The @keyframes rule — a named set of "poses" describing what the element looks like at points along a timeline.
2. The animation properties — applied to the element to say which keyframes to play and how to play them (how long, how many times, which direction).

Think of it like a flip book. The @keyframes are the individual drawings that define position at key moments; the animation properties decide how fast you flip through them and whether you flip back to the start when you reach the end.

Writing @keyframes

An @keyframes rule has a name and one or more stops. Each stop is written as a percentage of the total duration, and inside it you list the CSS properties the element should have at that moment. The browser interpolates — smoothly fills in — everything between your stops.

@keyframes grow-in {
  0% {
    opacity: 0;
    transform: scale(0.5);   /* start small and invisible */
  }
  50% {
    opacity: 1;
    transform: scale(1.2);   /* overshoot past full size */
  }
  100% {
    opacity: 1;
    transform: scale(1);     /* settle to normal size */
  }
}

Here the element fades in while growing, briefly overshoots at the halfway point, then settles — a lively, "poppy" entrance.

Percentages, or just from / to

The stops are progress markers through the animation's duration:

• 0% (or from) — the starting pose;
• 100% (or to) — the ending pose;
• anything in between — an intermediate pose.

When you only need a start and an end, from/to reads more clearly:

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

You can also give several stops the same pose by comma-separating the percentages — invaluable for effects like a bounce that returns to the ground several times.

Which properties can you animate?

Most properties with a numeric (or color) value can be animated. The ones you'll reach for most are:

Applying the Animation

Defining @keyframes does nothing on its own — you must attach it to an element. At minimum you need a name and a duration:

.badge {
  animation-name: fade-in;
  animation-duration: 2s;   /* one cycle takes 2 seconds */
}

Without a duration the animation defaults to 0s and jumps straight to the final state with nothing visible. The name is case-sensitive and must match the @keyframes exactly.

The animation shorthand

In practice you'll almost always use the animation shorthand, which packs every sub-property into one declaration:

.badge {
  /* name  duration  timing        delay  count     direction  fill-mode  */
  animation: fade-in 2s ease-in-out 0.5s  infinite  alternate  forwards;
}

The canonical order of the eight values is:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

Five Essential Recipes

These five patterns cover the vast majority of real UI motion. Learn them and you can build most interface animations by combining and tweaking.

1. Fade In

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal { animation: fade-in 0.4s ease-out; }

Like gently turning up the lights in a dark room. Ideal for modals, toasts, and freshly loaded content.

2. Pulse (attention)

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

A subtle "beating heart" that draws the eye to a call-to-action without shouting.

3. Slide In From Left

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
.sidebar { animation: slide-in-left 0.5s ease-out forwards; }

A drawer opening from off-screen. forwards keeps it in place at the end instead of snapping back. Note we animate translateX, not left — much smoother.

4. Bounce

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}
.notification-icon { animation: bounce 2s ease; }

A ball bouncing with decreasing height. The comma-separated stops share the "grounded" pose, and the two peaks (40% then a smaller 60%) create the settling rhythm.

5. Spin (loader)

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-color);
  border-left-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

A classic loading indicator. linear keeps the rotation perfectly even, and infinite runs it until you remove the animation. The trick is the single colored border side sweeping around a transparent ring.

.badge {
  animation:
    grow-in 0.3s ease-out forwards,
    pulse   1.5s ease-in-out 0.3s infinite;
}

Accessibility & Best Practices

Respect prefers-reduced-motion

Some people experience nausea, dizziness, or migraines from screen motion (vestibular disorders). Every animated interface must offer a calm alternative. Browsers expose the user's OS-level setting through a media query:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

This near-instant override effectively disables motion while still leaving elements in their final state. It's like offering both stairs and an elevator — everyone reaches the same floor by the route that suits them.

Do / Don't

Appropriate durations

Too slow feels sluggish; too fast goes unnoticed. Like conversation, motion has a natural, comfortable pace.

Hands-on Exercise

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animation Showcase</title>
  <style>
    body { font-family: system-ui, sans-serif; display: grid;
           place-items: center; min-height: 100vh; gap: 2rem; }
    .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .logo { width: 90px; height: 90px; border-radius: 50%;
            background: #3498db; color: #fff; display: grid;
            place-items: center; font-weight: 700; }
    .badge { width: 44px; height: 44px; border-radius: 50%;
             background: #e74c3c; color: #fff; display: grid; place-items: center; }
    .spinner { width: 44px; height: 44px; border: 5px solid #eee;
               border-top-color: #9b59b6; border-radius: 50%; }
    .btn { padding: 12px 24px; background: #2ecc71; color: #fff;
           border: none; border-radius: 6px; cursor: pointer; }

    /* 1. Define your @keyframes here */

    /* 2. Apply the animations here */

    /* 3. Add your prefers-reduced-motion block here */
  </style>
</head>
<body>
  <div class="grid">
    <div class="logo">LOGO</div>
    <div class="badge">3</div>
    <div class="spinner"></div>
    <button class="btn">Hover Me</button>
  </div>
</body>
</html>

@keyframes grow-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-18px); }
  60% { transform: translateY(-9px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.logo    { animation: grow-in 0.6s ease-out forwards; }
.badge   { animation: bounce 2s ease; }
.spinner { animation: spin 1s linear infinite; }
.btn:hover { animation: pulse 0.9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .logo, .badge, .spinner, .btn:hover {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

Summary & Quiz

📚 Further Reading

• MDN — Using CSS animations
• MDN — @keyframes reference
• web.dev — Animations and performance

🚀 What's Next?

Now that you can define and apply animations, the next lesson dives into the eight animation properties in depth — mastering timing functions, cubic-bézier curves, direction, fill modes, and running several animations on one element.