CSS Animations

CSS Animations (animation) are more powerful than transitions (transition). Transitions can only define simple changes from a start state to an end state, while animations can create complex sequences containing multiple intermediate steps.

Creating CSS animations mainly involves two steps:

1. Define the Animation: Use the @keyframes rule to define the sequence and keyframes of the animation.
2. Apply the Animation: Apply the @keyframes animation to an element and configure its behavior (like duration, iteration count, etc.).

@keyframes Rule

The @keyframes rule is used to define the state of the animation at different points in time. You can use from and to keywords to define the start (0%) and end (100%) states, or use percentages to define any number of intermediate states.

/* Define an animation named 'slide-in' */
@keyframes slide-in {
  from { /* 0% */
    transform: translateX(-100%);
    opacity: 0;
  }
  to { /* 100% */
    transform: translateX(0);
    opacity: 1;
  }
}

/* Define a multi-step animation named 'pulse' */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

Animation Properties

animation-name

Specifies the name of the @keyframes animation to apply to the element.

div {
  animation-name: slide-in;
}

animation-duration

Specifies the time it takes for the animation to complete one cycle (in s or ms).

div {
  animation-duration: 2s;
}

animation-timing-function

Sets the speed curve of the animation, same values as transition-timing-function (ease, linear, ease-in-out, etc.).

animation-delay

Sets how long to wait after applying the animation to the element before starting playback.

animation-iteration-count

Sets the number of times the animation should play.

• <number>: Plays the specified number of times.
• infinite: Plays infinitely in a loop.

div {
  animation-iteration-count: infinite;
}

animation-direction

Sets whether the animation should play in reverse after each cycle.

• normal: (Default) Plays normally from start to end each cycle.
• reverse: Plays in reverse each cycle (from 100% to 0%).
• alternate: Plays forward and backward alternately. Odd times (1, 3, 5...) forward, even times (2, 4, 6...) backward.
• alternate-reverse: Plays backward and forward alternately.

animation-fill-mode

Defines the style state of the element before and after the animation plays.

• none: (Default) After animation ends, the element reverts to its original styles.
• forwards: After animation ends, the element retains the styles of the last keyframe.
• backwards: If there is an animation delay, the element immediately applies the styles of the first keyframe during the delay period.
• both: Applies both forwards and backwards effects.

animation-play-state

Allows you to pause and resume the animation.

• running: (Default) The animation is playing.
• paused: The animation is paused.

.element:hover {
  animation-play-state: paused; /* Pause animation on hover */
}

animation (Shorthand Property)

Best practice is to use the animation shorthand property. The order is as follows:

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

div {
  animation: pulse 2s ease-in-out infinite;
}

CSS animations provide web designers and developers with a powerful and performant tool for creating engaging dynamic user experiences.