The Animation Property

The animation property is used to animate (gradually change from one style to another) CSS properties with discrete values: layout properties (border, height, width, etc) properties defining position (left, top), font sizes, colors and opacities.

Note: Properties, which use a keyword as value such as display: none;, visibility: hidden; or height: auto; cannot be animated.

The @keyframes at-rule

To use animation you must first specify what should happen at specific moments during the animation. This is defined with the @keyframes at-rule.

The @keyframes rule consists of a keyword “@keyframes” followed by animation-name, which identifies the animation. The animation is then applied to an element by using this identifier as a value for the animation-name property.

In curly braces we put keyframe selectors, which define keyframes (or waypoints) in the animation sequence when the styles should be changed. The keyframe selector can start with a percentage (%) or with the keywords “from” (same as 0%) and “to” (same as 100%). 0% is a starting point of the animation; 100% is the end point; 100% is the end point.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
      padding: 50px;
      animation: pulse 4s infinite;
      }
      @keyframes pulse {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #d5dce8; }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

In this example we bind the animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background color of the <div> element from "green" to "grey".

Animation-related Properties

Animation is the shorthand property used for setting all the animation properties in a single declaration. We are listing all standard animation-related properties below.

animation-name

This property defines the name of the @keyframes rule you want to apply.

animation-name: keyframe-name | none | initial | inherit

animation-duration

It defines the length of time (in seconds or milliseconds) that an animation takes to complete one cycle of animation.

animation-duration: time | initial | inherit

animation-timing-function

This property defines how the animation will progress over the duration of each cycle — not throughout the whole of the animation.

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit

It can assume the following values:

  • ease — (default) the animation starts slowly, then becomes faster, and ends slowly.
  • ease-in — the animation has a slow start, but accelerates at the end and stops abruptly.
  • ease-out — the animation has a quick start, but slows down at the end.
  • ease-in-out — the animation has both a slow start and a slow end
  • linear — the animation has the same speed throughout the animation; often best used for color or opacity changes.
  • cubic-bezier (n,n,n,n) - define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

animation-delay

This property sets the time (in seconds or milliseconds) between the element being loaded and start of the animation.

animation-delay: time | initial | inherit

animation-direction

It defines whether the animation should play in reverse on alternate cycles or not. Its default resets on each cycle.

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

The following values can be applied:

  • normal — (default) - animation is played forward (keyframes 0% - 100%)
  • reverse — animation is played backward (keyframes (100% - 0%)
  • alternate — the animation is played forward, then is reversed and repeated.
  • alternate-reverse — the animation is played backward then forward.

animation-iteration-count

Sets the number of times an animation cycle should be played before stopping. The default value is one, but any positive integer value can be set. If you set infinite keyword the animation will be played endlessly.

Note: A zero or negative integer will never play the animation.

animation-iteration-count: number | infinite | initial | inherit

animation-fill-mode

This property specifies a style for the element applied before or after the animation is executed.

animation-fill-mode: none | forwards | backwards | both | initial | inherit

It can assume the following values:

  • forwards - specifies that the element should keep the style values set by the last keyframe (depend on animation-iteration-count and animation-direction properties).
  • backwards - specifies that the element should get the style values set by the first keyframe (depends on animation-direction) and keep it within animation-delay period.
  • both - specifies that the animation should follow the rules for both forwards and backwards.
  • none - (default) specifies that no styles will be applied to the element before or after the animation is executed

animation-play-state

This property specifies whether the animation is playing or paused.

animation-play-state: paused | running | initial | inherit

The default value is running.

Now let’s see animation-related properties in action.

Example

@keyframes pulse {
  /* declare animation actions here */
}

.element {
  animation-name: pulse;
  animation-duration: 3.5s;   
  animation-timing-function: ease-in; 
  animation-delay: 1s 
  animation-direction: alternate; 
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  The same can be declared using animation shorthand property 
*/

.element {
  animation: 
    pulse
    3.5s
    ease-in
    1s
    alternate
    infinite
    none
    running;
}

Multiple Animations

It is possible to declare multiple animations on a selector, you just need to separate the values with commas.

Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
      height: 100%;
      margin: 0;
      }
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .element {
      height: 200px;
      width: 200px;
      background-color: #1c87c9;
      animation: pulse 5s ease infinite alternate,
      nudge 5s linear infinite alternate;
      }
      @keyframes pulse {
      0%, 100% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      }
      @keyframes nudge {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(150px, 0); }
      80% { transform: translate(-150px, 0); }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>