Keyframe animations

animation

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

animation

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

animation-delay

Delay the start

Start the animation sequence after a short waiting period.

css, style, animation, animation-delay

animation-direction

Forward or reverse

Run the animation sequence forward or reverse.

css, style, animation, animation-direction

animation-duration

From start to finish

Specify the amount of time for the animation to take, from start to finish.

css, style, animation, animation-duration

animation-fill-mode

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

animation-iteration-count

Repeat, repeat, repeat

How many times should the animation be repeated.

css, style, animation, animation-iteration-count

animation-name

Connect selectors to @keyframes

Specify which animation @keyframes to use with a selector declaration.

css, style, animation, animation-name

animation-play-state

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

animation-timing-function

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

@keyframes

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