CSS3 Animations

CSS Animations

Bringing Elements to Life

CSS animations allow you to animate the transition between CSS style configurations. You define a set of keyframes that describe the styles at different points in time, and the browser smoothly interpolates between them.

This enables creating complex, multi-step animations directly in CSS without relying on JavaScript or older technologies like Flash.

Browser Support

CSS Animations (@keyframes and the animation properties) are widely supported across all modern web browsers. Vendor prefixes (like -webkit-, -moz-) are generally no longer necessary for these features.

Understanding Key Concepts

Creating a CSS animation involves two main steps:

1. Defining the animation using @keyframes: This rule specifies the sequence of styles the element should take on during the animation. You define styles at specific percentage points (or using from for 0% and to for 100%).
2. Applying the animation to an element: You use the animation properties (or the animation shorthand) on the element you want to animate, linking it to the defined @keyframes and configuring aspects like duration, timing, and iteration.

The @keyframes Rule

The @keyframes rule defines the stages of an animation sequence. You give the animation a name and specify the styles at various points.

Example: A simple animation named color-change that fades background color from red to yellow:

@keyframes color-change {
  from { background-color: red; }
  to   { background-color: yellow; }
}

Example: An animation named move-and-spin with multiple steps using percentages:

@keyframes move-and-spin {
  0% {
    background-color: blue;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    background-color: lightblue;
    transform: translateX(100px) rotate(180deg);
  }
  100% {
    background-color: blue;
    transform: translateX(0) rotate(360deg);
  }
}

Applying Animations with animation Properties

Once @keyframes are defined, you apply them to an element using animation properties:

• animation-name: Specifies the name of the @keyframes rule to use.

• animation-duration: Specifies how long one cycle of the animation should take (e.g., 4s, 500ms). This is mandatory; the default is 0s, meaning no animation occurs.

• animation-timing-function: Controls the speed curve of the animation (e.g., linear, ease-in-out, cubic-bezier(...)).

• animation-delay: Specifies a delay before the animation starts (e.g., 2s).

• animation-iteration-count: Specifies how many times the animation should repeat (e.g., 3, infinite).

• animation-direction: Specifies whether the animation should play forwards, backwards, or alternate (e.g., normal, reverse, alternate, alternate-reverse).

• animation-fill-mode: Defines the styles applied to the element before the animation starts (due to animation-delay) or after it ends (e.g., none, forwards, backwards, both).

• animation-play-state: Allows pausing and resuming the animation (e.g., running, paused). Often controlled via JavaScript.

Example: Applying the move-and-spin animation:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue; /* Initial state */

  /* Apply the animation */
  animation-name: move-and-spin;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

The animation Shorthand Property

It’s often more concise to use the animation shorthand property to set multiple animation values at once. The order is generally flexible, but duration and delay must be distinguishable (duration usually comes first if both are time values).

Example using shorthand for the previous animation:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;

  /* Shorthand: name duration timing-function delay iteration-count direction */
  animation: move-and-spin 4s ease-in-out 1s infinite alternate;
}

Note: animation-play-state and animation-fill-mode are often set separately as they are less commonly included in the basic shorthand.

Performance and Accessibility Considerations

Performance: Animating certain CSS properties is more performant than others. Prefer animating transform (like translate, scale, rotate) and opacity, as browsers can often optimize these without recalculating layout.

Accessibility: Some users experience discomfort or medical issues from excessive motion. Use the prefers-reduced-motion media query to disable or reduce non-essential animations for these users.

@media (prefers-reduced-motion: reduce) {
  .animated-box {
    /* Disable or replace animation for users who prefer reduced motion */
    animation: none;
  }
}

CSS Animation Properties Summary

Property / Rule	Description
@keyframes	Defines the stages (keyframes) of an animation sequence.
animation	Shorthand property for setting most animation properties.
animation-name	Specifies the name of the @keyframes rule to apply.
animation-duration	Sets the length of time for one animation cycle.
animation-timing-function	Sets the speed curve of the animation.
animation-delay	Sets a delay before the animation starts.
animation-iteration-count	Sets the number of times the animation should repeat.
animation-direction	Sets whether the animation plays forwards, backwards, or alternates.
animation-fill-mode	Sets the styles applied outside the animation’s execution time.
animation-play-state	Allows pausing and resuming the animation.