CSS Animation

    In this CSS advance tutorial, we will be going through the animation property and all the other properties associated with it including the @keyframes rules.

    CSS Animation

    In CSS we can create animation on an HTML element without using JavaScript and Flash. Using the animation, we can gradually change the style of an element from one to another with a specified time. And here in this tutorial, we will be going to discuss the following properties.

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

    Note: Many old browser versions do not support CSS animation so make sure that you have the latest browser version.

    The @keyframes Rule

    When we define CSS animation for an element, first we need to specify some keyframe rules. And the keyframe defines the different styling for the element at different times. The @keyframe rule holds the two selectors from and to. The from define the actual or current styling of the element and to define the new styling that should be applied to the element according to the animation-duration.

    Example

    Create a box whose actual color is green and it changes to blue within 4 seconds. 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                from{background-color: green;}
                to{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 4s;
            }
        </style>
    </head>
<body>
    <div>Changing Color</div>
</body>
</html>

    Note

    The animation will only remain for the animation-duration time. The animation-duration property defines the time period, how long it should take to complete the animation. The animation-name defines the name of the keyframe, that should be invoked for the animation. The from and to keywords of the keyframes can also be represented using percentage values 0% to 100%. Where 0% represents the animation starting point and 100% represent animation completion.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                0%{background-color: green;}
                25%{background-color: red;}
                50%{background-color: yellow;}
                75%{background-color: violet ;}
                100%{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 6s;
            }
        </style>
    </head>
<body>
    <div>Color Changing Animation</div>
</body>
</html>

    Delay Animation

    The animation-delay property halts the animation commencing for a specified time. It accepts value in seconds.

    Syntax 

    {animation-delay: seconds;}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                from{background-color: green;}
                to{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 4s;
                animation-delay: 2s;
            }
        </style>
    </head>
<body>
    <div>Animation Begin after 2 seconds</div>
</body>
</html>

    How many times an Animation should run

    By default, an Animation runs only once and after running the element comes back to its original styling. But using the animation-iteration-count property we can set how many times an animation should be run.

    Example

    Create a color-changing animation that runs three times. 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                0%{background-color: green;}
                25%{background-color: red;}
                50%{background-color: yellow;}
                75%{background-color: violet ;}
                100%{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 6s;
                animation-iteration-count: 3;
            }
        </style>
    </head>
<body>
    <div>Color Changing Animation</div>
</body>
</html>

    To run animation for the infinite times set the animation-iteration-count to infinite

    Example

    CSS 

                @keyframes box{
                0%{background-color: green;}
                25%{background-color: red;}
                50%{background-color: yellow;}
                75%{background-color: violet ;}
                100%{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 6s;
                animation-iteration-count: infinite;
            }

    CSS animation-direction Property

    The animation-direction property defines how should the animation perform on the element. By default, the animation starts from 0% and go to 100% but this flow can be altered or manipulated using animation-duration property. It can accept one of these four values

    • normal is the default value for animation-direction and in this the animation play from 0 to 100% in forward direction.
    • reverse run the animation in backward order 100% to 0% or to to
    • alternate first run the animation in forward order then backward.
    • alternate-reverse first, run the animation backward then forward.

    Example

    Play animation in reverse order 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                0%{background-color: green;}
                25%{background-color: red;}
                50%{background-color: yellow;}
                75%{background-color: violet ;}
                100%{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 6s;
                animation-direction: reverse;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

    Speed rate of the Animation

    With the help of animation-timing-function property, we can define the speed rate of the animation. This property does not affect the overall duration of animation specified using animation-duration property, it just paces up some parts and slows down other parts of the animation and completes the animation in a specified duration. It can accept one of these 6 values.

    • ease start the animation at slow speed, then fast, and at last end with slow speed.
    • linear value maintains the constant speed.
    • ease - in value commences the animation with slow speed.
    • ease-out value ends the animation with slow speed.
    • ease-in-out start and end the animation with slow speed.
    • cubic-bezier(a,b,c,d) let us define a custom speed for the animation.

    Example

    Create animation with a slow starting speed. 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                0%{background-color: green;}
                25%{background-color: red;}
                50%{background-color: yellow;}
                75%{background-color: violet ;}
                100%{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: green;
                animation-name: box;
                animation-duration: 6s;
                animation-timing-function: ease-in;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

    Animation fill-mode property

    By default, if an element animation-duration ends or it does not have infinite animation-infinite-count, then it comes back to its normal styling. But this behavior of the element coming back to its defined styling can be altered using animation-fill-mode property. The animation-fill-mode defines a target styling for the element once the animation is over. It can accept one of the following properties.

    • none is the default value for the animation-fill-mode property and it does not specify any specific animation styling to the element once the animation is over.
    • forwards value specifies that the element will have the last keyframe or 100% styling properties.
    • backwords value specifies that the element will have the first keyframe or 0% styling properties, and completion of the animation.
    • both values specify that the element will have the expending properties in both directions.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            @keyframes box{
                0%{background-color: green;}
                25%{background-color: red;}
                50%{background-color: yellow;}
                75%{background-color: violet ;}
                100%{background-color: blue;}
            }
            div{
                width: 70px;
                height:70px;
                background-color: black;
                animation-name: box;
                animation-duration: 6s;
                animation-delay: 1s;
                animation-fill-mode: forwards;
            }
        </style>
    </head>
<body>
    <div></div>
</body>
</html>

    The Animation property

    The animation property is a shorthand for all the properties we have mentioned above.

    Syntax 

    {animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-duration}

    Example CSS 

     {
  animation-name: box;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

    Or 

    {
  animation: example 6s linear 1s infinite alternate;
}

    Summary

    • Animation changes the styling of an element smoothly.
    • The @keyframe rule defines what animation styling should be performed on the element.
    • The animation-name defines the name of the animation that used along with @keyframe rule.
    • The animation-duration set the time duration of animation completion
    • The animation-timing-function alters the rate of animation.
    • The animation-delay property halts the animation commencement for a specified amount of time.
    • The animation-iteration-count can repeat the animation more than one time or infinite.
    • The animation-direction property specifies the flow of keyframe rule execution.
    Previous Tutorial Next Tutorial