Animation CSS Properties

• animation-name – declares the name of the @keyframes at-rule to manipulate.
• animation-duration – the length of time it takes for an animation to complete one cycle.
• animation-timing-function – the timing function for the animation (e.g., linear vs. ease-in vs. a custom cubic bezier function). Same functions as for transitions. Defines the timing function between two successive property states (from state A to state B).
• animation-delay - the amount of time waited before the animation begins after the animation has been applied to the element.
• animation-iteration-count - the amount of times the animation should run (infinite ot integer number, default is 1).
• animation-direction - the direction of the animation (normal, reverse, alternate, alternate-reverse).
• animation-play-state - pause/play the animation (paused/running). It is helpful when you simply need to pause an animation and potentially continue it later.
• animation-fill-mode - sets which values are applied before/after the animation. For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.
• animation – a shorthand for all properties:
  animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
  All of the above declarations are interchangeable in order in a space-separated list, except for the number values, which must be defined in the above order: duration, delay, and iteration count.

You can see on the right the typlical values.

Animation Keyframes

Keyframes are the animation instructions.

To set multiple points at which an element should undergo a transition, use the @keyframes rule.
The @keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated.

Percentage values are used to indicate the point at which the values of a keyframe should be achieved. The “from” keyword references 0% and the “to” keyword references 100%. Functionally the following is identical:

@keyframes example {
    0% { bottom: -90px; right: -40px; }
    100% { bottom: -90px; right: -40px; }
}

@keyframes example {
    from { bottom: -90px; right: -40px; }
    to { bottom: -90px; right: -40px; }
}        

The keyframes block defined below will change background of the element continiously.

Note that in order the change from 100% to 0% will be smooth, we have to activate the animation in alternate direction, or to give to 0 and 100% the same declarations as is done below.

@keyframes change-bg {
    0%,
    100% {
        background: lightseagreen;
        color: white;
    }

    33.3% {
        background: blue;
        color: orange;
    }
    66.6% {
        background: red;
    }
}
.demo1 {
    animation: change-bg 10s ease-in-out 2s;
    animation-iteration-count: infinite;
}

Multiple Animation

You can comma-separate the values to declare multiple animations on a selector as well. In the example below, we want to change the color of the ellipse in a @keyframe while also nudging it from side to side with another.

In addition to background change, moving animation is applied to the same element.

@keyframes move {
    0%,
    100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(300px, 0);
    }
    50% {
        transform: translate(300px, -50px);
    }
    75% {
        transform: translate(0px, -50px);
    }
}

.demo2 {
    animation: change-bg 8s ease infinite, move 10s linear infinite;
}

Animation-fill-mode

animation-fill-mode specifies if the animation styles are visible before or after the animation plays.

By default, the animation will not effect the styles of the element before the animation begins (if there is an animation-delay) or after the animation is finished. The animation-fill-mode property can override this behavior with the following possible values:

• none (default) - the animation does not apply any styles to the element, before (during delay if exists) or after the animation.
• backwards - before the animation (during the animation delay), the styles of the initial keyframe are applied to the element.
• forwards - after the animation is finished, the styles defined in the last keyframe are retained by the element. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count.
• both - the animation will follow the rules for both forwards and backwards, extending the animation properties before and after the animation.

The importance of the values backwards and both, come in handy in complex animations that are controlled by scripting or user input. For more see Understanding the CSS animation-fill-mode Property.

Refresh the page to see the animation below.

@keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

.demo3 {
    animation: scale 2s linear 1;
}

.demo4 {
    animation: scale 2s linear 1  forwards;
}