CSS Animations

CSS Animations

CSS can achieve animation effects for HTML elements without using JavaScript or Flash!

CSS

In this chapter, you will learn the following properties:

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

Browser support for animations

The numbers in the table indicate the first browser version that fully supports this property.

Property Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

What is CSS animation?

Animations make elements gradually change from one style to another.

You can freely change any number of CSS properties.

To use CSS animations, you must first specify some keyframes for the animation.

Keyframes contain the styles that an element has at a specific time.

@keyframes rule

If you are @keyframes The rule specifies the CSS style, and the animation will gradually change from the current style to the new style at a specific time.

To make the animation work, you must bind the animation to an element.

The following example binds the 'example' animation to the <div> element. The animation will last for 4 seconds, changing the background color of the <div> element from 'red' to 'yellow' gradually:

Example

/* Animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Apply animation effects to this element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Try It Yourself

Note:animation-duration The property defines how long it takes to complete the animation. If not specified animation-duration If the property is not specified, the animation will not occur because the default value is 0s (0 seconds).

In the above example, by using the keywords 'from' and 'to' (representing 0% (start) and 100% (end)), we set when the style changes.

You can also use percentage values. By using percentages, you can add any number of style changes as needed.

The following example changes the background color of the <div> element when the animation is completed 25%, 50%, and 100%:

Example

/* Animation code */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Apply animation to the element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Try It Yourself

The following example changes the background color and position of the <div> element when the animation is 25%, 50%, and 100% complete:

Example

/* Animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Apply animation to the element */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Try It Yourself

Delay animation

animation-delay This property specifies the delay time before the animation starts.

The following example has a 2-second delay before starting the animation:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Try It Yourself

Negative values are also allowed. If a negative value is used, the animation will start playing as if it has already played N seconds.

In the following example, the animation will start playing as if it has already played for 2 seconds:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Try It Yourself

Set how many times the animation should run

animation-iteration-count This property specifies the number of times the animation should run.

The following example runs the animation 3 times before stopping:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Try It Yourself

The following example uses the value "infinite" to make the animation continue forever:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Try It Yourself

Reverse or alternate animation

animation-direction This property specifies whether the animation should play forward, backward, or alternately.

animation-direction This property accepts the following values:

  • normal - The animation plays normally (forward). Default value
  • reverse - The animation plays in reverse direction (backward)
  • alternate - The animation plays forward first, then backward
  • alternate-reverse - The animation plays backward first, then forward

The following example will run the animation in the opposite direction (backward):

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Try It Yourself

The following example uses the value "alternate" to make the animation run forward first, then backward:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Try It Yourself

The following example uses the value "alternate-reverse" to make the animation run backward first, then forward:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Try It Yourself

Specify the speed curve of the animation

animation-timing-function This property specifies the speed curve of the animation.

animation-timing-function This property accepts the following values:

  • ease - Specify an animation that starts slowly, then speeds up, and then slows down to an end (default)
  • linear - Specify an animation with the same speed from start to end
  • ease-in - Specify an animation that starts slowly
  • ease-out - Specify an animation that ends slowly
  • ease-in-out - Specify an animation that starts and ends slower
  • cubic-bezier(n,n,n,n) - Run your own values defined in the cubic Bezier function

The following examples show some different speed curves that can be used:

Example

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Try It Yourself

Specify the fill mode of the animation

CSS animations will not affect the element before the first keyframe plays or after the last keyframe plays.animation-fill-mode this property can override this behavior.

When the animation is not playing (before the start, after the end, or both ends),animation-fill-mode This property specifies the style of the target element.

The animation-fill-mode property accepts the following values:

  • none - Default value. The animation will not apply any styles to the element before or after execution.
  • forwards - The element will retain the style values set by the last keyframe (depending on animation-direction and animation-iteration-count).
  • backwards - The element will take the style values set by the first keyframe (depending on animation-direction) and retain this value during the animation delay.
  • both - The animation follows both forward and reverse rules, thus expanding animation properties in both directions.

The following example retains the style values from the last keyframe when the animation ends for the <div> element:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Try It Yourself

The following example makes the <div> element obtain the style value set by the first keyframe before the animation starts (during the animation delay):

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Try It Yourself

The following example makes the <div> element obtain the style value set by the first keyframe before the animation starts, and retain the style value of the last keyframe at the end of the animation:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Try It Yourself

Animation Shorthand Property

The following example uses six animation properties:

Example

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Try It Yourself

Using the shorthand animation The property can also achieve the same animation effect as the previous example:

Example

div {
  animation: example 5s linear 2s infinite alternate;
}

Try It Yourself

CSS Animation Properties

The following table lists the @keyframes rules and all CSS animation properties:

Property Description
@keyframes Specifies the animation mode.
animation Sets a shorthand property for all animation properties.
animation-delay Specifies the delay before the animation starts.
animation-direction Determines whether the animation plays forward, backward, or alternates.
animation-duration Specifies the time it should take for the animation to complete one cycle.
animation-fill-mode Specifies the style of the element when the animation is not playing (before start, after end, or both).
animation-iteration-count Specifies the number of times the animation should be played.
animation-name Specifies the name of the @keyframes animation.
animation-play-state Define whether the animation runs or pauses.
animation-timing-function Define the speed curve of the animation.