CSS Animation & @keyframes Beispiele

CSS animations bring web pages to life without JavaScript. Using @keyframes and the animation shorthand, you can create everything from subtle fade-ins to complex multi-step sequences. This complete CSS animation and @keyframes guide covers syntax, timing functions, performance optimization, accessibility, and dozens of copy-paste examples you can use today.

Create gradient animations with our CSS Gradient Generator ->

Animate shadows with our Box Shadow Generator ->

1. @keyframes Syntax

The @keyframes at-rule defines the stages of an animation. You give it a name, then describe what CSS properties should apply at each point in the animation timeline. Browsers interpolate smoothly between each defined step.

from / to (Two-Step)

/* Simple two-step animation using from/to */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* from = 0%, to = 100% */
.element {
  animation: fade-in 0.5s ease;
}

Percentage Steps (Multi-Step)

/* Multi-step animation with percentage keyframes */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

/* You can combine from/to with percentages */
@keyframes color-shift {
  0%, 100% { background-color: #3b82f6; }
  25%      { background-color: #8b5cf6; }
  50%      { background-color: #ec4899; }
  75%      { background-color: #f59e0b; }
}

Multiple Properties in Keyframes

@keyframes slide-in-fade {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  60% {
    opacity: 1;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

Naming conventions: use lowercase-kebab-case (e.g., fade-in, slide-up). Avoid generic names like animation1. Names are case-sensitive and must not conflict with CSS keywords like none, inherit, or initial.

2. The animation Shorthand

The animation shorthand property combines all animation sub-properties into one declaration. The order matters for disambiguation between duration and delay (the first time value is duration, the second is delay), but otherwise the order is flexible.

The individual sub-properties are: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

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

/* Examples */
animation: fade-in 0.3s ease;
animation: slide-up 0.5s ease-out 0.2s;
animation: spin 1s linear infinite;
animation: bounce 0.6s ease-in-out 0s infinite alternate;
animation: fade-in 0.5s ease forwards;

/* Individual properties (equivalent to above) */
.element {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* Multiple animations on one element */
.element {
  animation:
    fade-in 0.5s ease,
    slide-up 0.5s ease 0.1s,
    color-shift 3s linear infinite;
}

/* fill-mode values */
animation-fill-mode: none;      /* default: no styles applied outside animation */
animation-fill-mode: forwards;  /* retains the final keyframe styles */
animation-fill-mode: backwards; /* applies first keyframe styles during delay */
animation-fill-mode: both;      /* combines forwards + backwards */

/* direction values */
animation-direction: normal;            /* 0% -> 100% */
animation-direction: reverse;           /* 100% -> 0% */
animation-direction: alternate;         /* 0% -> 100% -> 0% -> ... */
animation-direction: alternate-reverse; /* 100% -> 0% -> 100% -> ... */

3. Timing Functions

Timing functions control the acceleration curve of an animation. They determine how intermediate values are calculated between keyframes, giving animations their character and feel.

/* Built-in keyword timing functions */
animation-timing-function: ease;        /* default: slow start, fast, slow end */
animation-timing-function: linear;      /* constant speed */
animation-timing-function: ease-in;     /* slow start, fast end */
animation-timing-function: ease-out;    /* fast start, slow end */
animation-timing-function: ease-in-out; /* slow start and end */

/* Equivalent cubic-bezier() values */
ease:        cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear:      cubic-bezier(0.0,  0.0, 1.0,  1.0)
ease-in:     cubic-bezier(0.42, 0.0, 1.0,  1.0)
ease-out:    cubic-bezier(0.0,  0.0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0)

/* Custom cubic-bezier examples */
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* back-in-out */
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);       /* overshoot */
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);       /* ease-out-cubic */

cubic-bezier() takes four values (x1, y1, x2, y2) defining control points of a cubic Bezier curve. Values outside 0-1 on the y-axis create overshoot/bounce effects. Use browser DevTools or online tools to visualize curves.

/* steps() function for frame-by-frame animations */
animation-timing-function: steps(4);            /* 4 equal jumps, default jump-end */
animation-timing-function: steps(4, jump-start); /* jump at start of each interval */
animation-timing-function: steps(4, jump-end);   /* jump at end of each interval */
animation-timing-function: steps(4, jump-both);   /* jump at start and end */
animation-timing-function: steps(4, jump-none);   /* no jump at start or end */
animation-timing-function: step-start;           /* = steps(1, jump-start) */
animation-timing-function: step-end;             /* = steps(1, jump-end) */

/* Sprite sheet animation example */
.sprite {
  width: 64px;
  height: 64px;
  background: url('spritesheet.png') 0 0;
  animation: walk 0.8s steps(8) infinite;
}

@keyframes walk {
  to { background-position: -512px 0; } /* 64px * 8 frames = 512px */
}

steps() creates a staircase function, jumping between states instead of interpolating smoothly. The optional second parameter (jump-start, jump-end, jump-both, jump-none) controls when the jump happens. This is essential for sprite sheet animations.

4. Common Animations (Copy-Paste)

These are the most frequently used animations in web development. Each example is production-ready -- just copy the CSS and apply the class to your element.

Fade In

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

Fade Out

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

Slide In from Left

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.slide-in-left {
  animation: slideInLeft 0.5s ease-out forwards;
}

Slide In from Bottom

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.slide-in-up {
  animation: slideInUp 0.5s ease-out forwards;
}

Bounce

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.bounce {
  animation: bounce 1s ease infinite;
}

Pulse

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

Spin

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

Shake

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
  animation: shake 0.6s ease-in-out;
}

/* Trigger shake on invalid input */
input:invalid:focus {
  animation: shake 0.4s ease-in-out;
}

5. Transform Animations

The transform property is ideal for animations because it is GPU-accelerated and does not trigger layout recalculations. You can combine multiple transform functions in a single declaration for complex movements.

Rotate

@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pendulum swing */
@keyframes pendulum {
  0%   { transform: rotate(-30deg); }
  50%  { transform: rotate(30deg); }
  100% { transform: rotate(-30deg); }
}
.pendulum {
  transform-origin: top center;
  animation: pendulum 2s ease-in-out infinite;
}

Scale

/* Pop-in effect */
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.pop-in {
  animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Heartbeat */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.3); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.3); }
  70%      { transform: scale(1); }
}
.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

Translate

/* Floating effect */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
.float {
  animation: float 3s ease-in-out infinite;
}

/* Marquee scroll */
@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.marquee {
  animation: marquee 10s linear infinite;
}

Skew

@keyframes skewShake {
  0%, 100% { transform: skewX(0deg); }
  25%      { transform: skewX(5deg); }
  75%      { transform: skewX(-5deg); }
}
.skew-shake {
  animation: skewShake 0.5s ease-in-out;
}

Combined Transforms

/* Rotate + Scale + Translate combined */
@keyframes complexEntry {
  0% {
    transform: translateY(50px) rotate(-10deg) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}
.complex-entry {
  animation: complexEntry 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* 3D flip */
@keyframes flip {
  0%   { transform: perspective(600px) rotateY(0deg); }
  100% { transform: perspective(600px) rotateY(360deg); }
}
.flip {
  animation: flip 1s ease-in-out;
}

6. Animation Events in JavaScript

CSS animations fire three events that you can listen to with JavaScript: animationstart, animationend, and animationiteration. These allow you to synchronize JavaScript logic with CSS animation states.

const element = document.querySelector('.animated');

// Fires when the animation starts (after any delay)
element.addEventListener('animationstart', (e) => {
  console.log(`Animation "${e.animationName}" started`);
  console.log(`Duration: ${e.elapsedTime}s`);
});

// Fires when the animation completes
element.addEventListener('animationend', (e) => {
  console.log(`Animation "${e.animationName}" ended`);
  // Common pattern: remove the animation class after completion
  element.classList.remove('animate');
});

// Fires at the end of each iteration (except the last)
element.addEventListener('animationiteration', (e) => {
  console.log(`Animation "${e.animationName}" completed iteration`);
  console.log(`Elapsed time: ${e.elapsedTime}s`);
});

Practical Example: One-Shot Animation

/* CSS */
.notification-enter {
  animation: slideInRight 0.4s ease-out forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* JavaScript: remove class after animation so it can replay */
document.querySelectorAll('.notification').forEach(el => {
  el.addEventListener('animationend', () => {
    el.classList.remove('notification-enter');
  });
});

/* Re-trigger: remove and re-add class with a reflow in between */
function triggerAnimation(el) {
  el.classList.remove('notification-enter');
  // Force reflow to restart animation
  void el.offsetWidth;
  el.classList.add('notification-enter');
}

Note: The animationend event does not fire if the animation is removed before it completes (e.g., by removing the class). The animationiteration event fires at the end of each iteration except the last one.

7. Transition vs Animation

CSS transitions and animations both create movement, but they serve different purposes and have different capabilities. Understanding when to use each is crucial for clean, maintainable CSS.

/* TRANSITION: hover color change */
.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

/* ANIMATION: autonomous pulsing glow */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px #3b82f6; }
  50%      { box-shadow: 0 0 20px #3b82f6, 0 0 40px #3b82f680; }
}
.notification-badge {
  animation: glow 2s ease-in-out infinite;
}

Rule of thumb: Use transition for simple state changes triggered by user interaction (hover, focus, class toggle). Use animation for complex, autonomous, multi-step, or looping movements.

8. Performance Optimization

Not all CSS properties animate equally. Some trigger expensive layout recalculations, while others are handled entirely by the GPU compositor. Understanding this distinction is key to smooth 60fps animations.

GPU-accelerated properties: transform and opacity are composited on the GPU and skip layout and paint. Always prefer these for animations.

/* GOOD: GPU-accelerated, no layout or paint */
@keyframes slide {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* BAD: triggers layout on every frame */
@keyframes slide-bad {
  from { left: -100%; opacity: 0; }
  to   { left: 0; opacity: 1; }
}

will-change: This property hints to the browser that an element will be animated, allowing it to optimize ahead of time. Use it sparingly -- applying will-change to too many elements wastes GPU memory.

/* Apply will-change before animation starts */
.card {
  will-change: transform;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}

/* Remove will-change after animation completes */
.animated-element {
  will-change: transform, opacity;
}
.animated-element.done {
  will-change: auto; /* release GPU memory */
}

Avoid animating: width, height, top, left, margin, padding, border-width, font-size. These trigger layout (reflow), which is the most expensive rendering operation. Use transform: translate() instead of top/left, and transform: scale() instead of width/height.

/* INSTEAD OF animating width: */
/* Bad */
@keyframes expand-bad {
  from { width: 0; }
  to   { width: 200px; }
}

/* Good: use scaleX */
@keyframes expand-good {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.expand {
  transform-origin: left center;
  animation: expand-good 0.5s ease forwards;
}

/* INSTEAD OF animating top/left: */
/* Bad */
@keyframes move-bad {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 200px; }
}

/* Good: use translate */
@keyframes move-good {
  from { transform: translate(0, 0); }
  to   { transform: translate(200px, 100px); }
}

9. prefers-reduced-motion (Accessibility)

Some users experience motion sickness, seizures, or discomfort from animations. The prefers-reduced-motion media query lets you respect their system preference. This is not optional -- it is an accessibility requirement under WCAG 2.1 (Success Criterion 2.3.3).

There are two approaches: (1) Remove animations for users who prefer reduced motion, or (2) Only add animations for users who have no preference. The second approach (progressive enhancement) is considered safer.

Approach 1: Remove Animations

/* Remove all animations and transitions for users who prefer reduced motion */
@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;
  }
}

Approach 2: Progressive Enhancement (Recommended)

/* Default: no animation */
.card {
  opacity: 1;
  transform: none;
}

/* Only animate if user has no motion preference */
@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: fadeInUp 0.5s ease forwards;
  }

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

JavaScript Detection

// Check if user prefers reduced motion
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
  // Skip animation, show content immediately
  element.style.opacity = '1';
} else {
  element.classList.add('animate-in');
}

// Listen for changes (user toggles setting)
window.matchMedia('(prefers-reduced-motion: reduce)')
  .addEventListener('change', (e) => {
    if (e.matches) {
      document.body.classList.add('reduce-motion');
    } else {
      document.body.classList.remove('reduce-motion');
    }
  });

10. Loading Spinners (Pure CSS)

Loading spinners are one of the most common uses of CSS animation. Here are 5 different styles, all using pure CSS with no JavaScript or images required.

1. Classic Border Spinner

.spinner-border {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

2. Dual Ring Spinner

.spinner-dual {
  width: 40px;
  height: 40px;
  border: 4px solid transparent;
  border-top-color: #3b82f6;
  border-bottom-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

3. Pulsing Dot

.spinner-pulse {
  width: 20px;
  height: 20px;
  background: #3b82f6;
  border-radius: 50%;
  animation: pulse-spinner 1.2s ease-in-out infinite;
}

@keyframes pulse-spinner {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

4. Three Bouncing Dots

.spinner-dots {
  display: flex;
  gap: 6px;
}
.spinner-dots span {
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite;
}
.spinner-dots span:nth-child(1) { animation-delay: 0s; }
.spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* HTML: <div class="spinner-dots"><span></span><span></span><span></span></div> */

5. Rotating Squares

.spinner-squares {
  width: 40px;
  height: 40px;
  position: relative;
}
.spinner-squares::before,
.spinner-squares::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #3b82f6;
}
.spinner-squares::before {
  animation: square-rotate 2s ease infinite;
}
.spinner-squares::after {
  animation: square-rotate 2s ease infinite 1s;
  opacity: 0.5;
}

@keyframes square-rotate {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(0.6); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(0.6); }
  100% { transform: rotate(360deg) scale(1); }
}

11. Scroll-Triggered Animations

Scroll-triggered animations reveal content as the user scrolls down the page. The modern approach uses the Intersection Observer API to add CSS classes when elements enter the viewport, keeping the animation logic in CSS and the trigger logic in minimal JavaScript.

Intersection Observer + CSS Classes

/* CSS: define the animation and the initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.reveal.visible .child:nth-child(1) { transition-delay: 0s; }
.reveal.visible .child:nth-child(2) { transition-delay: 0.1s; }
.reveal.visible .child:nth-child(3) { transition-delay: 0.2s; }

// JavaScript: Intersection Observer
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        // Optional: stop observing after first trigger
        observer.unobserve(entry.target);
      }
    });
  },
  {
    threshold: 0.1,     // Trigger when 10% visible
    rootMargin: '0px 0px -50px 0px' // Offset trigger point
  }
);

// Observe all elements with the .reveal class
document.querySelectorAll('.reveal').forEach((el) => {
  observer.observe(el);
});

CSS Scroll-Driven Animations (Chrome / Edge)

/* Pure CSS scroll-triggered animation (no JavaScript!) */
/* Supported in Chrome 115+ and Edge 115+ */

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

.scroll-reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

/* Scroll progress bar at top of page */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transform-origin: left;
  animation: scaleProgress linear;
  animation-timeline: scroll();
}

@keyframes scaleProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

For a pure-CSS approach, the new animation-timeline: scroll() and animation-timeline: view() properties are supported in Chrome and Edge. They allow scroll-driven animations without any JavaScript.

12. Frequently Asked Questions

What is the difference between CSS transition and CSS animation?

CSS transitions require a trigger (like :hover or a class change) and animate between exactly two states (start and end). CSS animations using @keyframes can run automatically, loop infinitely, define multiple intermediate steps, play in reverse, and pause/resume. Use transitions for simple interactive state changes; use animations for complex, autonomous, or multi-step effects.

How do I make a CSS animation loop forever?

Set animation-iteration-count: infinite or use the shorthand: animation: spin 1s linear infinite. The animation will repeat indefinitely until the element is removed or the animation property is changed. You can also use animationiteration events in JavaScript to perform actions on each loop.

Why is my CSS animation janky or stuttering?

Animation jank is usually caused by animating properties that trigger layout (width, height, top, left, margin) or paint (background-color, box-shadow, border-radius). Instead, use transform and opacity, which are composited on the GPU. Also add will-change: transform to the animated element and ensure you are not animating too many elements simultaneously.

How do I pause and resume a CSS animation?

Use the animation-play-state property. Set it to paused to freeze the animation at its current position, and running to resume. Example: .paused { animation-play-state: paused; }. You can toggle this with JavaScript by adding/removing a class. This works for both single and infinite animations.

How do I trigger a CSS animation when an element scrolls into view?

Use the Intersection Observer API in JavaScript to detect when an element enters the viewport, then add a CSS class that starts the animation. Define the animation on the class (e.g., .animate-in { animation: fadeIn 0.6s ease forwards; }) and add it when observed. For modern browsers (Chrome/Edge), you can also use the native CSS animation-timeline: view() property for a pure-CSS solution.

CSS animations are a powerful, performant way to enhance user experience. Combined with accessible practices and GPU-optimized properties, they can make any web application feel polished and professional.

Create gradient animations with our CSS Gradient Generator ->

Animate shadows with our Box Shadow Generator ->