CSS3 Animations | The animation Property

To demonstrate how the animation property works let’s consider the following example:

#div11 {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin-bottom: 30px;
}
@keyframes animation1 {
    from { width: 0px; }
    to { width: 200px; }
}
#div11:hover {
   animation-name: animation1;
   animation-duration: 3s;
   animation-timing-function: ease-in;
   animation-delay: 1s;
   animation-direction: reverse;
}

First we have a normal div with fix dimensions and orange background color. On mouse over it will change its dimensions according to the CSS rules. It will last 3 seconds with ease-in timing; the animation will have 1 second delay. It will go in reverse which means that instead of going from 0 px to 200 px it will go from 200 px to 0 px.

The same result can be achieved with the code below:

#div11:hover {
	animation: animation1 3s ease-in 1s reverse;
}

Here is the result:

Note:
The order in which each property is declared in the shorthand declaration is important and cannot be altered, or the animation will not work properly.

Leave a Reply