CSS3 ANIMATIONS

CSS3 @keyframes Rule

We will use the rule @keyframes to specify the new style of the element

@keyframes animationName { from {background:green;} to {background:blue;} }

CSS3 animation

We will use animation to smoothly move from one state to another

animation:animationName 3s;

Example, website with a yellow rectangle, placing the mouse over that rectangle will change color from green to blue.

<html> <head> <style> div { width:150px; height:150px; background:yellow; } div:hover { animation:animation1 3s; /* Firefox */ -moz-animation:animation1 3s; /* Safari and Chrome */ -webkit-animation:animation1 3s; /* Opera */ -o-animation:animation1 3s; } @keyframes animation1 { from {background:green;} to {background:blue;} } /* Firefox */ @-moz-keyframes animation1 { from {background:green;} to {background:blue;} } /* Safari,Chrome */ @-webkit-keyframes animation1 { from {background:green;} to {background:blue;} } /* Opera */ @-o-keyframes animation1 { from {background:green;} to {background:blue;} } </style> </head> <body> <div>Animation Effect!</div> </body> </html>

We can also change several styles at once

For example, web page where the green rectangle, change color and position for 6 seconds

<html> <head> <style> div { width:80px; height:80px; background:green; position:relative; animation:animation1 6s; /* Firefox */ -moz-animation:animation1 6s; /* Safari and Chrome */ -webkit-animation:animation1 6s; /* Opera */ -o-animation:animation1 6s; } @keyframes animation1 { 0% {background:green; left:0px; top:0px;} 25% {background:blue; left:100px; top:100px;} 50% {background:yellow; left:100px; top:0px;} 75% {background:red; left:0px; top:100px;} 100% {background:green; left:0px; top:0px;} } /* Firefox */ @-moz-keyframes animation1 { 0% {background:green; left:0px; top:0px;} 25% {background:blue; left:100px; top:100px;} 50% {background:yellow; left:100px; top:0px;} 75% {background:red; left:0px; top:100px;} 100% {background:green; left:0px; top:0px;} } /* Safari,Chrome */ @-webkit-keyframes animation1 { 0% {background:green; left:0px; top:0px;} 25% {background:blue; left:100px; top:100px;} 50% {background:yellow; left:100px; top:0px;} 75% {background:red; left:0px; top:100px;} 100% {background:green; left:0px; top:0px;} } /* Opera */ @-o-keyframes animation1 { 0% {background:green; left:0px; top:0px;} 25% {background:blue; left:100px; top:100px;} 50% {background:yellow; left:100px; top:0px;} 75% {background:red; left:0px; top:100px;} 100% {background:green; left:0px; top:0px;} } </style> </head> <body> <div>Animation</div> </body> </html>