CSS Animations

What Are CSS Animations?

CSS animations let you animate elements from one style to another without JavaScript. Unlike transitions, which usually need a trigger like hover or focus, animations can run automatically, repeat, pause, reverse, or play in multiple steps.

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.box {
  animation: fadeIn 0.4s ease;
}

In this example, the element fades from invisible to visible over 0.4 seconds.

Why CSS Animations Are Important

• Create polished user interface motion without JavaScript.
• Provide feedback for loading, progress, and status changes.
• Improve perceived quality when used carefully.
• Support repeated or multi-step motion effects.
• Work well with transforms and opacity for smooth performance.
• Help build loaders, skeleton screens, micro-interactions, and visual cues.
• Can improve usability when motion supports meaning and does not distract.

CSS Animations Cheatsheet

The following table explains the most important CSS animation properties.

CSS Animation Syntax

CSS animations use two parts: a @keyframes rule and animation properties applied to an element.

@keyframes animationName {
  from {
    property: startValue;
  }

  to {
    property: endValue;
  }
}

.element {
  animation: animationName duration timing-function delay iteration-count direction fill-mode;
}

CSS @keyframes

The @keyframes rule defines what happens during an animation. You can use from and to, or percentage steps.

@keyframes slideIn {
  from {
    transform: translateX(-2rem);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

animation-name

The animation-name property assigns a keyframes animation to an element.

.box {
  animation-name: slideIn;
  animation-duration: 0.4s;
}

animation-duration

The animation-duration property controls how long one animation cycle takes.

.loader {
  animation-name: spin;
  animation-duration: 1s;
}

Short animations often use milliseconds, while continuous loaders may use one or more seconds.

animation-timing-function

The animation-timing-function property controls acceleration and speed curve.

.panel {
  animation: slideIn 0.35s ease-out;
}

animation-delay

The animation-delay property waits before starting an animation.

.card {
  animation: fadeIn 0.4s ease forwards;
}

.card:nth-child(2) {
  animation-delay: 0.1s;
}

.card:nth-child(3) {
  animation-delay: 0.2s;
}

Animation delay is useful for staggered card entrances and staged UI effects.

animation-iteration-count

The animation-iteration-count property controls how many times an animation runs.

.spinner {
  animation: spin 1s linear infinite;
}

Use infinite for loaders and repeated indicators, but avoid unnecessary infinite animations on large page areas.

animation-direction

The animation-direction property controls playback direction.

.pulse {
  animation: pulse 1s ease-in-out infinite alternate;
}

animation-fill-mode

The animation-fill-mode property controls whether animation styles apply before or after the animation plays.

.alert {
  animation: slideIn 0.3s ease forwards;
}

forwards keeps the final keyframe styles after the animation completes.

animation-play-state

The animation-play-state property pauses or resumes an animation.

.marquee {
  animation: moveText 10s linear infinite;
}

.marquee:hover,
.marquee:focus-within {
  animation-play-state: paused;
}

Pausing animation on hover or focus can improve readability and accessibility.

animation Shorthand

The animation shorthand combines several animation properties.

.box {
  animation: slideIn 0.4s ease-out 0s 1 normal forwards;
}

The shorthand commonly includes name, duration, timing function, delay, iteration count, direction, and fill mode.

Loading Spinner Animation Example

A spinner is one of the most common CSS animation examples.

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #dee2e6;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

Fade In Animation Example

Fade animations are useful for content reveal, alerts, modals, and panels.

.fade-in {
  animation: fadeIn 0.35s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Slide In Animation Example

Slide animations are useful for menus, side panels, toasts, and notifications.

.toast {
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Pulse Animation Example

Pulse animations can draw attention to badges, status dots, buttons, or notifications.

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #198754;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Skeleton Loader Animation Example

Skeleton loaders show a placeholder while content is loading.

.skeleton {
  min-height: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    #e9ecef 25%,
    #f8f9fa 50%,
    #e9ecef 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

Skeleton loaders should be used carefully and removed when real content appears.

CSS Animation Performance

For smoother animations, prefer properties that are less expensive for the browser.

Animating layout-heavy properties can cause reflow and hurt performance.

Reduced Motion for CSS Animations

Some users prefer less motion. Support prefers-reduced-motion to improve accessibility.

@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;
  }
}

CSS Animations and Accessibility

• Respect prefers-reduced-motion.
• Avoid flashing or rapidly blinking animation effects.
• Do not rely only on animation to communicate important meaning.
• Keep motion short, subtle, and purposeful.
• Pause continuous motion when users hover or focus if content must be read.
• Use clear text or status messages with loaders when needed.
• Test animations with keyboard navigation and reduced motion settings.

CSS Animations and SEO

CSS animations do not directly improve rankings, but they can support user experience, engagement, perceived performance, and content presentation when used responsibly.

• Use animations to support content, not distract from it.
• Keep meaningful text and content in real HTML.
• Avoid heavy animations that slow down the page.
• Make loaders and transitions accessible.
• Use performance-friendly properties to keep pages responsive.

Common CSS Animation Mistakes

• Animating layout-heavy properties such as width, height, top, and left.
• Using infinite animations too often.
• Ignoring reduced motion preferences.
• Making animations too slow or distracting.
• Using animation as the only way to communicate important information.
• Creating flashing effects that can be uncomfortable or unsafe.
• Not testing animations on mobile and lower-performance devices.
• Forgetting that animations can affect perceived page speed.

CSS Animation Best Practices

• Use transform and opacity for smoother animations.
• Keep animations short and purposeful.
• Use animation-fill-mode: forwards; when the final state should stay visible.
• Use infinite animations only for loaders or live status indicators.
• Respect prefers-reduced-motion.
• Provide text alternatives for loading or status changes when needed.
• Use consistent motion timing across your design system.
• Test animations on mobile, desktop, keyboard navigation, and slower devices.

Key Takeaways

• CSS animations use @keyframes to define motion steps.
• The animation shorthand applies animation settings to an element.
• Animations can run automatically, repeat, delay, reverse, and pause.
• Use transforms and opacity for better performance.
• Support reduced motion for accessibility.
• Animations should improve usability, not distract from content.