keyframes.mdx

title	CSS Keyframe Animations
description	Learn how to use @keyframes to create complex, multi-stage animations in CSS, defining animation name, duration, timing, iteration count, and direction. Explore infinite loops and animation-fill-mode for advanced effects.
keywords	CSS animation @keyframes animation-name animation-duration infinite animation animation-fill-mode forward backward
tags	CSS animation @keyframes animation-name animation-duration infinite animation animation-fill-mode forward backward
sidebar_label	Keyframes

While CSS Transitions are great for animating between two states (e.g., :hover and default), CSS Keyframe Animations allow you to create complex, multi-stage movements, loops, and effects that run automatically without requiring user interaction.

Keyframes define a set of steps in an animation sequence, giving you precise control over styles at specific points in time.

1. Defining the Animation (@keyframes)

The foundation of any complex CSS animation is the @keyframes rule. You must give the animation a unique name.

Inside the @keyframes block, you define the styles at various points in the animation cycle using percentages (0% to 100%) or the keywords from (same as 0%) and to (same as 100%).

Example Keyframe Structure

/* 1. Define the animation and give it a name (e.g., 'pulse') */
@keyframes pulse {
  /* Start State (0%) */
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  
  /* Mid-point State (50%) */
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  
  /* End State (100%) */
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

2. Applying the Animation (The animation Shorthand)

Once the keyframes are defined, you must attach them to an element using the animation property (or its longhand components).

The animation shorthand is typically defined in this order:

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];

Key Properties

Property	Description	Common Values
animation-name	The name of the @keyframes rule (e.g., pulse).	Custom name
animation-duration	How long one cycle of the animation lasts.	2s, 500ms
animation-timing-function	The speed curve for the animation cycle.	ease-in, linear, cubic-bezier
animation-iteration-count	How many times the animation should repeat.	1, 3, infinite
animation-direction	Whether to play forward, backward, or alternate.	normal, reverse, alternate
animation-fill-mode	What styles the element retains before and after the animation.	none, forwards, backwards, both

The animation-fill-mode

This property is crucial for ensuring the animation's final state sticks after it's finished playing.

• forwards: The element retains the styles defined in the final keyframe (100% or to). Use this if you want the element to stay in its animated end position.
• backwards: The element applies the styles defined in the initial keyframe (0% or from) immediately when the page loads, even during the animation-delay.
• both: Applies both forwards and backwards behavior.

3. Full Animation Example

Let's apply the pulse keyframes defined earlier to a button.

.animated-button {
  /* 1. Apply the animation shorthand */
  animation: pulse 2s ease-in-out infinite alternate;
  
  /* Break down: 
     - name: pulse
     - duration: 2 seconds
     - timing: ease-in-out
     - delay: 0s (default)
     - count: infinite (keeps looping)
     - direction: alternate (reverses every cycle)
  */
}

This animation will:

1. Run the pulse keyframes over 2 seconds.
2. In the first cycle, it goes from 0% to 100% (out then in).
3. In the second cycle, due to alternate, it runs from 100% back to 0% (in then out).
4. This continues indefinitely.

Interactive Keyframes Demo

This demo combines keyframes with the animation shorthand to create a loading spin effect that runs infinitely.

In this demo, the blue spinner continuously rotates due to the infinite animation, while the yellow box fades in and scales up once, retaining its final state thanks to the forwards fill mode.