CSS Animation Documentation

Introduction

CSS Animation is a technique that allows HTML elements to smoothly transition from one style to another.

With Animation, it is possible to modify numerous CSS properties once or repeatedly.

To enable it, you need to define keyframes outlining the styles that the element will adopt at specific moments.

@Keyframes

To define the CSS styles of the animation, you employ the at-rule @keyframes using the syntax:

    @keyframes abc {
        from {property: value;}
        to {property: value;}
    }

Animation Name

The animation-name property is used to connect the @keyframes rule to the element you wish to animate.

    element {
        width: 100px;
        height:50px;
        animation-name: abc;
    }
                 
    @keyframes abc {
        from {property: value;}
        to {property: value;}
    }

Animation Duration

To set the time an animation will take to complete, you use the animation-duration property

The keywords "from" and "to" represent the start and completion points of your Animation.

They can also be defined with percentages from 0% to 100%. This way you can add more style changes to your element at once.

In the example below you can see the change in rotation of a square <div> element setting the animation at equal points from start to completion:

/* The animation code */
    @keyframes abc {
        0%   {transform: rotate(0deg);}
        25%  {transform: rotate(20deg);}
        50%  {transform: rotate(40deg);}
        100% {transform: rotate(60deg);}
    }
                    
/* The element to apply the animation to */
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
        animation-name: abc;
        animation-duration: 3s;
    }

In the following abc example both the rotation and the position of the <div> element will change during the same time:

/* The animation code */
    @keyframes abc {
        0%   {transform: rotate(0deg); left:0; top:0;}
        25%  {transform: rotate(20deg); left:100; top:50;}
        50%  {transform: rotate(40deg); left:200; top:100;}
        100% {transform: rotate(60deg); left:300; top:200;}
    }
    
/* The element to apply the animation to */
    div {
      width: 100px;
      height: 100px;
      position: relative;
      background-color: blue;
      animation-name: abc;
      animation-duration: 3s;
    }

Animation Delay

The animation-delay property is used to define a delay for the start of an animation.

In the example below, the animation delays 2 seconds to start:

    div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: blue;
        animation-name: abc;
        animation-duration: 5s;
        animation-delay: 2s;
    }

Delay can be defined by a negative value as well. This will mean that the animation will start as if it was already in motion for N seconds.

The example bellow shows the animation as if it had been started 2 seconds ago:

    div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: blue;
        animation-name: abc;
        animation-duration: 3s;
        animation-delay:-2s;
    }

Animation Iteration Count

Using the animation-iteration-count property you can set the number of times the animation will run.

The animation in the following example will play for 4 times before it stops:

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

Setting the value to "infinite" will allow the animation to play for ever:

    div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: blue;
        animation-name: abc;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

Animation Direction

With the animation-direction property you can define if an animation will play forwards, backwards or in alternate cycles.

These are the values you can use:

• normal - This is the default. The animation will play forwards.
• reverse - The animation will play in reverse direction (backwards)
• alternate - The animation will play forwards first, then backwards
• alternate-reverse - The animation will play backwards first, then forwards

The animation in the example below will play in reverse direction (backwards):

    div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: blue;
        animation-name: abc;
        animation-duration: 3s;
        animation-direction: reverse;
    }

In the example bellow, the animation will play forwards first, and then backwards:

    div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: blue;
        animation-name: abc;
        animation-duration: 3s;
        animation-iteration-count: 2;
        animation-direction: alternate;
    }

In this example, the animation will run backwards first, and then forwards:

    div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: blue;
        animation-name: abc;
        animation-duration: 3s;
        animation-iteration-count: 3;
        animation-direction: alternate-reverse;
    }

Animation Timing Function

The animation-timing-function property defines the speed curve of the animation.

You can use these values:

• ease - This is the default. The animation will start slow, then go fast, then end slowly.
• linear - The animation will have the same speed from start to finish.
• ease-in - The animation will start slow.
• ease-out - The animation will end slow.
• ease-in-out - The animation will start slow, and end slow.
• cubic-bezier(n,n,n,n) - You can specify your own values as a function

Animation Fill Mode

With CSS animations the elements are not affected before or after their animation plays. To override this, you can use the animation-fill-mode property

Whith the animation-fill-mode property you can define a style to be applied to the animated element before, after (or both) it plays.

The following values can be applied:

• none - This is the default value. No styles will be applied.
• forwards - The style values that are defined by the last keyframe (depends on animation-direction and animation-iteration-count) will be kept to the element.
• backwards - The style values that are defined by the first keyframe (depends on animation-direction) will be kept to the element, during the animation-delay period.
• both - The style values that are defined by both the first and the last keyframe will be kept to the element.

Here are three examples of an element using the above values:

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

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

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

Animation Shorthand Property

You can apply multiple animation properties in one line by using the shorthand animation property:

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

    div {
        animation: abc 5s linear 3s infinite alternate;
    }

Accessibility

Please keep in mind that flashy animations can be stressful to folks with ADHD or trigger viewing sensitivities.

Please try using the Reduced Motion Media Query and any technique that can pause and/or cancel motion graphics.