Keyframe animations


Properties to gradually change the look of things, or to continuously loop over different states of an element.

  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • @keyframes


All-in-one animation spec

A shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
css, style, animation, animation


Delay the start

Start the animation sequence after a short waiting period.
css, style, animation, animation-delay


Forward or reverse

Run the animation sequence forward or reverse.
css, style, animation, animation-direction


From start to finish

Specify the amount of time for the animation to take, from start to finish.
css, style, animation, animation-duration


Handling the before and after scenarios

Specify how an animation's styles are applied while awaiting start and after completion.
css, style, animation, animation-fill-mode


Repeat, repeat, repeat

How many times should the animation be repeated.
css, style, animation, animation-iteration-count


Connect selectors to @keyframes

Specify which animation @keyframes to use with a selector declaration.
css, style, animation, animation-name


Dynamically pause and resume

Use JavaScript to dynamically check whether an animation is paused or running. Also use JavaScript to change this state.
css, style, animation, animation-play-state


Easing functions

Adjust the speed of an animation when it begins and ends to create smooth acceleration and deceleration effects.
css, style, animation, animation-timing-function


Define animation waypoints

The @keyframes rule is used to define the waypoints in an animation sequence. Waypoints provide control over the intermediate steps of an animation sequence.
css, style, animation, @keyframes

style > animation Keyframe animations

🔗 🔎