CSS Transitions

A transition watches a CSS property and, when that property changes, it smoothly animates it from the old value to the new value over a specified duration.

How it works

1. An element has an initial style
2. Something triggers a change (usually :hover, :focus, or JS toggling a class)
3. CSS smoothly interpolates between the two states

All transition properties

The shorthand syntax

/* property  duration  timing-function  delay */
transition: background-color 0.3s ease-in-out 0s;

/* multiple transitions */
transition: background-color 0.3s ease, transform 0.2s ease-out;

Live demos — hover each element

Example 1: Button with background and transform

/* CSS */
.button {
  background: #7F77DD;
  color: white;
  padding: 10px 24px;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background: #534AB7;
  transform: scale(1.05);
}

Example 2: Card lift effect

/* CSS */
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

Example 3: Transition all properties

/* Quick way to animate everything */
.element {
  transition: all 0.3s ease-in-out;
}

/* WARNING: 'all' can be expensive for performance.
   Prefer naming specific properties. */

Example 4: Using transition-delay for staggered effects

.nav-item:nth-child(1) { transition: opacity 0.3s ease 0s; }
.nav-item:nth-child(2) { transition: opacity 0.3s ease 0.1s; }
.nav-item:nth-child(3) { transition: opacity 0.3s ease 0.2s; }

What CAN be transitioned?

Any property with a numeric or color mid-point — things like:

• opacity, color, background-color
• width, height, margin, padding
• transform (translate, scale, rotate)
• border-radius, font-size, letter-spacing

CSS Animations

While transitions react to an event, animations run on their own. You define a full timeline of states using @keyframes, and the browser plays it out — automatically, on loop, in reverse, delayed, or paused.

Transitions vs. Animations at a glance

Understanding @keyframes

A keyframe rule defines what the element looks like at each stage of the animation. You name it, then reference that name.

@keyframes myAnimation {
  0%   { opacity: 0; transform: translateY(20px); }
  50%  { opacity: 0.5; }
  100% { opacity: 1; transform: translateY(0); }
}

/* You can also use 'from' and 'to' for simple cases */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

All animation properties

The shorthand

/* name  duration  timing  delay  iterations  direction  fill-mode */
animation: fadeIn  0.5s    ease    0.2s   1           normal     forwards;

animation-fill-mode explained

Live animation examples

Example: loading spinner

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px; height: 40px;
  border: 4px solid #eee;
  border-top-color: #534AB7;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Example: slide in on page load

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-text {
  animation: slideUp 0.6s ease-out both;
}

.hero-subtitle {
  animation: slideUp 0.6s ease-out 0.2s both; /* delayed */
}

Example: bouncing ball

@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}

.ball {
  animation: bounce 0.8s cubic-bezier(0.36,0.07,0.19,0.97)
             infinite alternate;
}

Visual explanations

The animation timeline

Duration: 2s
[0%]──────[25%]──────[50%]──────[75%]──────[100%]
  │           │           │           │          │
opacity:0  opacity:.5  opacity:1  opacity:.5  opacity:0
           ← defined by @keyframes at each stop →

Timing functions explained

Each ball below starts at the left and reaches the right in exactly 3 seconds — but travels differently. Watch how each timing function moves:

When to use which timing function

Transition vs. animation: decision tree

Do you need it to run automatically (without user action)?
  YES → Use an Animation (@keyframes)
  NO  → Is the change triggered by hover/focus/class toggle?
          YES → Use a Transition
          NO  → Trigger a CSS class change with JS, then Transition

Custom cubic-bezier curves

/* Overshoot / spring effect */
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Fast snap */
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);

/* Use https://cubic-bezier.com to build custom curves visually */

GPU-accelerated properties (use these!)

These run on the GPU and are the fastest to animate:

• transform (translate, scale, rotate, skew)
• opacity

Hands-on practice

Try these in a code editor (CodePen, VS Code with Live Server). Reveal hints when you're stuck.

Beginner exercises

Intermediate exercises

Challenge projects

Common mistakes & best practices

Common mistakes

Debugging transitions

• Open DevTools → select element → check Computed styles to see if transition is being applied
• Use the Animations panel (Chrome DevTools → More tools → Animations) to pause, replay, scrub animations
• If a transition isn't working, check: is the property transitionable? Is transition on the base element?
• If an animation isn't running, check: is the @keyframes name spelled exactly right?

Best practices

Performance: what triggers what

Accessibility: prefers-reduced-motion

/* Always include this for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Transitions vs. animations: when to choose what

Summary, revision notes & flashcards

Flashcards — tap to flip

Tap any card to reveal the answer.

One-line revision notes

• Transition = smooth change between two CSS states, event-triggered
• Animation = scripted sequence via @keyframes, runs automatically
• @keyframes = named timeline of CSS changes, referenced by animation-name
• transform + opacity = the only truly cheap properties to animate
• ease-out = best for things entering; ease-in = best for things leaving
• animation-fill-mode: both = apply start state during delay AND end state after finish
• prefers-reduced-motion = always include for accessible animations