Animations & Transitions - CSS Essentials

← Previous: CSS Grid Layouts Next: CSS Variables →

Transitions smoothly animate property changes. Animations define keyframe sequences for more complex motion effects. Both run on the GPU for smooth performance.

Transitions Timing Functions Keyframes Performance

CSS Transitions

Transitions smoothly animate a change in CSS property from one value to another over time. Use transition-property, transition-duration, and others.

.box {
  width: 100px;
  height: 100px;
  background: var(--primary);
  transition: all 0.3s ease;
}

.box:hover {
  width: 200px;
  background: var(--accent-2);
}

Try it - Hover the box

Timing Functions

Control how a transition progresses. ease, linear, ease-in, ease-out, ease-in-out, or cubic-bezier().

.box {
  transition: transform 0.5s ease-in-out;
  /* ease, linear, ease-in, ease-out, ease-in-out */
}

.box:hover {
  transform: translateX(200px);
}

Try it - Timing function comparison

Linear Ease (default) Ease-in Ease-out

Keyframe Animations

Define animations using @keyframes. Control multiple steps and create complex motion sequences. Use animation-name and animation-duration.

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

.box {
  animation: bounce 1s ease-in-out infinite;
  /* name, duration, timing, iteration */
}

Try it - Bouncing animations

Bounce • Spin • Pulse

Performance Tips

Not all properties animate at the same performance. Animate transform and opacity for best results. Avoid animating width, height, or position when possible.

/* ✅ Good - GPU accelerated */
.box {
  transition: transform 0.3s, opacity 0.3s;
}

.box:hover {
  transform: scale(1.2) rotateY(180deg);
  opacity: 0.8;
}

/* ❌ Avoid - causes layout recalculations */
.box {
  transition: width 0.3s, height 0.3s;
}

Try it - Good vs poor performance

Good: transform

Poor: width/height

Hover to see the difference. Inspect DevTools to see which causes repaints.

Transitions vs Animations

Aspect	Transitions	Animations
Trigger	State change (hover, active, etc.)	Automatic or on load
Duration	Single transition	Multiple keyframes
Control	Simple A to B	Complex multi-step sequences
Repeat	No (unless triggered again)	Yes (infinite or n times)
Use Case	Button hover, form focus	Loading spinners, background animations

Summary

Transitions smoothly animate property changes between states.
animation uses @keyframes for complex, multi-step motion.
Timing functions control the pace (ease, linear, etc.).
transform and opacity perform best (GPU accelerated).
Avoid animating layout properties like width, height, position.
animation-delay staggers multiple animations.
animation-iteration-count controls how many times to loop.

← Previous: CSS Grid Layouts Next: CSS Variables →