CSS animations defines how to move from one CSS style to another.

The following tables describes the animation properties:

Property	Description
animation-delay	Delay before the animation starts (CSS time value)
animation-direction	whether to play backward on alternate cycles(normal/alternate)
animation-duration	animation duration in CSS time value
animation-iteration-count	animation iteration count in number
animation-name	the name of the animation in string
animation-play-state	paused and resumed (running/paused )
animation-timing-function	how intermediate animation values are calculated(ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier )
animation	Shorthand property.

The format for the animation shorthand property is as follows:

 
animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            p { 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgray; 
            } 
            #id1 { 
                font-size: large; 
                border: medium solid black; 
            } 
            #id1:hover { 
                -webkit-animation-delay: 100ms; 
                -webkit-animation-duration: 500ms; 
                -webkit-animation-iteration-count: infinite; 
                -webkit-animation-timing-function: linear; 
                -webkit-animation-name: 'GrowShrink'; 
            } 
            @-webkit-keyframes GrowShrink { 
                to { 
                    font-size: x-large; 
                    border: medium solid white; 
                    background-color: green; 
                    color: white; 
                    padding: 4px; 
                } 
            } 
        </style> 
    </head> 
    <body> 
        <p> 
            <span id="id1">CSS</span>
            This is a test.
            
        </p> 
    </body> 
</html>

Click to view the demo

Home
HTML CSS Book
CSS

Animations: