CSS Animations Tutorial & Guide

Complete guide to CSS animations. Learn how to animate CSS properties, create smooth keyframe animations, and master timing functions with practical examples.

What Are CSS Animations?

CSS animations allow you to animate the values of CSS properties over time. Unlike transitions that require a trigger, animations can run automatically, loop infinitely, and have multiple states between start and end.

Animations are defined using the @keyframes rule and applied using the animation property. This powerful combination lets you create everything from subtle hover effects to complex loading animations.

CSS Animation Properties

The animation shorthand combines multiple properties. Here's the complete list:

animation-name

References the @keyframes rule name

animation-name: slideIn;

animation-duration

How long the animation takes (seconds or milliseconds)

animation-duration: 0.5s;

animation-timing-function

Speed curve of the animation

animation-timing-function: ease-in-out;

animation-delay

Delay before animation starts

animation-delay: 1s;

animation-iteration-count

How many times to repeat (number or 'infinite')

animation-iteration-count: 3;

animation-direction

Play normal, reverse, or alternate

animation-direction: alternate;

animation-fill-mode

Styles before/after animation (forwards, backwards, both)

animation-fill-mode: forwards;

animation-play-state

Pause or play the animation

animation-play-state: paused;

Shorthand Syntax

Combine all animation properties in one line:

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

.example {

animation: slideIn 0.5s ease-out 0s 1 normal forwards;

}

CSS Animation Examples

Here are the most commonly used CSS animation patterns:

Fade In

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 0.5s ease-in;
}

Slide Up

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px); 
  }
  to { 
    opacity: 1;
    transform: translateY(0); 
  }
}
.element {
  animation: slideUp 0.6s ease-out;
}

Pulse

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

Spin

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

How to Animate CSS Properties

Follow these best practices for smooth, performant animations:

Animate transform and opacity only— These properties don't trigger layout recalculations, ensuring 60fps performance.
Use will-change sparingly — Applywill-change: transform only to elements that will actually animate, and remove it after.
Prefer CSS over JavaScript — CSS animations run on the compositor thread, staying smooth even when main thread is busy.
Test reduced motion preferences — Respect user preferences with @media (prefers-reduced-motion: reduce).
Keep animations subtle — Animations should enhance, not distract. Generally keep them under 1 second.

CSS Animation on Scroll

For scroll-triggered animations, you typically use JavaScript to detect scroll position and apply CSS classes:

/* CSS */

.fade-up {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.6s ease, transform 0.6s ease;

}

.fade-up.visible {

opacity: 1;

transform: translateY(0);

}

/* JavaScript adds 'visible' class when element enters viewport */

Libraries like AOS (Animate On Scroll) or Intersection Observer API make this easier for complex implementations.

Multiple Animations

Chain multiple animations with commas:

.element {

animation: slideIn 0.5s ease, fadeIn 0.3s ease 0.2s;

}

The second animation has a 0.2s delay, creating a staggered effect.

Generate CSS Animations Instantly

Use our free CSS Animation Generator to convert transitions to keyframes with visual easing editor. Perfect for learning and production code.

Open CSS Animation Generator

CSS Animation & Keyframe Generator