Skip to content

CSS Animation: Properties Cheat Sheet

Published on

Here is the updated CSS animation properties cheat sheet with “Description” and “Possible values” bolded:

Property Description and Possible Values
animation-name Specifies the name of the @keyframes animation.
Custom name, e.g. slideIn, fadeOut
animation-duration Defines how long the animation takes to complete.
Time values, e.g. 2s, 500ms
animation-timing-function Controls the speed curve of the animation over time.
linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(...)
animation-delay Delay before the animation starts.
Time values, e.g. 1s, 200ms
animation-iteration-count Number of times the animation repeats.
Number or infinite
animation-direction Direction in which the animation plays.
normal, reverse, alternate, alternate-reverse
animation-fill-mode Defines style applied before/after animation.
none, forwards, backwards, both
animation-play-state Controls whether the animation is running or paused.
running, paused

Shorthand & Properties Order

In the shorthand animation property, only the animation-name and animation-duration are required. The rest are optional. The only property that must appear in a specific order is animation-duration, which must come before animation-delay (if used), as both are duration values. All other properties can be arranged in any order without affecting their interpretation.

It is recommended however to follow this conventional order, to improve readability and maintainability:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state

Example of Common Usage:

animation: fadeOut 3s ease-in 1s infinite alternate forwards;
  • fadeOut: animation-name
  • 3s: duration
  • ease-in: timing function
  • 1s: delay
  • infinite: iteration count
  • alternate: direction
  • forwards: fill mode

Browser support

Baseline Widely available
Animations (CSS)Usage: 96%MDN
Chromesince43May 2015
Edgesince12Jul 2015
Firefoxsince16Aug 2012
Safarisince9Oct 2015
iOS Safarisince9Sep 2015
Androidsince43
Reply by email