Animation in CSS

Animation in CSS has two parts - @keyframes and animation-*.

The @keyframes at-rule

The first part requires us to define the @keyframes.

This lets us specify the CSS-style that should apply at the different points in the duration of the animation.

The different points of time are specified in % values. Any number of offsets positions between 0 and 100 percent can be specified.

from can be used for offset 0%, and to is the same as the offset 100%.

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

Below the css style has been specified for three time-points for one property - background-color.

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

It may as well specify multiple properties.

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

animation-* properties

Here is a list of properties that can be used to control how the transition of styles will be done to give the UI/UX of an animation.

• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-range
• animation-range-end
• animation-range-start
• animation-timeline
• animation-timing-function

Each of this sub-property sets some aspect of the animation.

Below is the definition for @keyframes named colorit to be run for 3 seconds.

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

All the sub-properties can be specified in a single line using the animation shorthand.

animation: 3s colorit;

The browser does the math required and renders the appropriate animation.

Similarly, the animation properties allow the control of delay, timing, number of times (iteration), direction etc. for the designer to achieve his vision.