·5 min read

CSS Animations: From Basics to Production-Ready Effects

CSSAnimationPerformance

CSS animations can transform a static page into an engaging experience. Here's how to use them effectively — with performance in mind.

Transitions vs Animations

Transitions animate between two states (triggered by hover, focus, class change):

css
.button {
  background: #6366f1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.button:hover {
  background: #4f46e5;
  transform: scale(1.05);
}

Animations run independently using @keyframes:

css
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.element {
  animation: fadeIn 0.3s ease-out;
}

Rule of thumb: Use transitions for interactive state changes, animations for entrance effects and looping motion.

The animation Shorthand

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

Example:

css
animation: fadeIn 0.5s ease-out 0s 1 normal forwards;
  • forwards: Element keeps the final keyframe state after animation ends
  • infinite: Loop forever
  • alternate: Reverse direction on each cycle

Useful @keyframes Patterns

Fade in from below (page load):

css
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Pulse (attention indicator):

css
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

Spin (loading spinner):

css
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

Shake (error feedback):

css
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

Performance: What to Animate

Only these properties are GPU-accelerated (cheap to animate):

  • transform (translate, scale, rotate)
  • opacity

Avoid animating:

  • width, height, top, left — triggers layout recalculation
  • box-shadow, border-radius — triggers repaint
  • color, background — triggers repaint (but acceptable for simple transitions)
css
/* Bad: animates width (triggers layout) */
@keyframes grow { to { width: 200px; } }

/* Good: animates transform (GPU-accelerated) */
@keyframes grow { to { transform: scaleX(2); } }

Respecting User Preferences

Always honor prefers-reduced-motion:

css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

This ensures users who are sensitive to motion aren't affected by your animations.

Staggered Animations

Create sequential entrance effects with animation-delay:

css
.item:nth-child(1) { animation-delay: 0ms; }
.item:nth-child(2) { animation-delay: 100ms; }
.item:nth-child(3) { animation-delay: 200ms; }

Or use CSS custom properties for cleaner code:

css
.item { animation: fadeUp 0.4s ease-out calc(var(--i) * 100ms) forwards; opacity: 0; }

Combine animations with visual effects for polished UIs. Create animated gradient backgrounds with our Gradient Generator, or add hover transitions to text shadow and filter effects.

Try These Tools

Gradient Generator →Text Shadow Generator →