CSS Animation Control

Master animation-timing-function, animation-delay, animation-direction, fill-mode, play-state, and the animation shorthand.

Overview

Once you know how to define @keyframes animations, the next step is fine-tuning their behavior with the full set of animation sub-properties. The **animation shorthand** compresses all sub-properties into one declaration: ```css animation: name duration timing-function delay iteration-count direction fill-mode play-state; ``` Key sub-properties: - **animation-timing-function**: controls the speed curve within each iteration - **animation-delay**: waits before the animation starts (can be negative to skip ahead) - **animation-direction**: `normal`, `reverse`, `alternate`, `alternate-reverse` - **animation-fill-mode**: what styles apply before/after the animation - **animation-play-state**: `running` or `paused` toggle with JavaScript The `steps()` timing function creates frame-by-frame animations perfect for sprite sheets and typewriter effects.

Key Points

•animation shorthand order: name duration timing delay iteration direction fill-mode
•animation-direction: alternate plays forward then backward on each cycle
•animation-delay: -0.5s starts the animation 0.5s into its cycle immediately
•animation-play-state: paused stops the animation at its current position
•steps(n) creates discrete n-frame jumps ideal for typewriter or sprite effects
•Multiple animations can be applied: animation: spin 1s linear infinite, pulse 2s ease infinite
•animation-fill-mode: both applies both backwards (before start) and forwards (after end) styles

Examples

animation shorthand all properties in one line

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

.toast {
  /* name | duration | timing | delay | iteration | direction | fill */
  animation: fadeSlide 0.4s ease-out 0s 1 normal forwards;
  /* shorthand equivalent: */
  /* animation: fadeSlide 0.4s ease-out forwards; */
}

You can omit properties at the end if they are the defaults (1 = once, normal direction).

steps() for a typewriter cursor blink

@keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: currentColor;
  animation: blink 0.8s steps(1) infinite;
}

steps(1) jumps instantly between the two states no smoothing. This creates a sharp cursor blink.

Pause animation on hover with play-state

.animated-icon {
  animation: spin 2s linear infinite;
}

.animated-icon:hover {
  animation-play-state: paused;
}

/* Or toggle with JS: */
/* el.style.animationPlayState = 'paused'; */

Common Mistakes

Putting animation-delay before animation-duration in the shorthand order matters for time values
Using animation-direction: reverse when you want to play a different animation reverse just plays the same keyframes backwards
Expecting animation-play-state to work on CSS :hover without first running the animation on the base state

Note

Use a negative animation-delay to start elements mid-cycle. For example, three dots with animation-delay: 0s, -0.3s, -0.6s on a 0.9s looping animation will appear offset from each other without any initial wait.

CSS Animation Control

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does animation-direction: alternate do?