CSS animation-direction Property

CSS animation-direction Property


CSS animation-direction Property
This property defines whether the animation should run forward (the normal keyword) or backward (the reverse keyword). 
Other accepted values are alternate (runs the animation forward, then backward) and alternate-reverse (runs the animation backward, then forward).
Syntax -
animation-direction: normal | alternate [,normal | alternate]*
Now we will see an Example -
Example - The block will change direction and size, and color  - 
    <!DOCTYPE html>
    <html>
    <style type="text/css">
    @-webkit-keyframes resize {
    from {
        width: 100px; height: 300px;
    left: 0; top: 0;
}
    50% {
        width: 100px; height: 100px;
    left: 300px; top: 0;
    background-color: rgb(68, 215, 235);
}
80%{
    background-color: rgb(217, 55, 182);
}
    to {
        width: 300px;height: 100px;
    left: 300px; top: 300px;
}
    }
    #anim1 {-webkit-animation-name:resize;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-direction: alternate;
    position:absolute;
    background-color: rgb(20, 106, 108);}
    </style>

    <body>
    <div id="anim1">Watch me move and change size!</div>
    </body>
    </html>
Output -