CSS3 Animations | @keyframes

To get an animation to work, you must bind the animation to an element.
In the example below, the animation lasts one second, and changes the background color of the orange div to green and blue.

#div10 {
    width: 200px;
    height: 100px;
    background-color: orange;
#div10:hover {
    animation-name: colorchange;
    animation-duration: 1s;
    -webkit-animation-name: colorchange;
    -webkit-animation-duration: 1s;
@keyframes colorchange {
    0% {background-color: orange; }
    50% {background-color: green; }
    100% {background-color: blue; }

The animation-name property specifies the animation to be used for the element.
The animation-duration property specifies the duration of the selected animation.
If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

Leave a Reply