Now let's start with the CSS3 Animation. The most innovative feature of the CSS3 is its animation. Though it's not supported by the all major browsers but it best suits for reducing the external plug-in affords.
CSS3 Animation
An Animation is such a property of CSS3, which is used to animate the object, without using flash or any other animation application. With this feature of CSS3 You can change the object into one style to another style in an animated way.
The all major browsers support Animation feature except Internet Explorer.
It gradually changes an object style to another style, The complete Animation depends upon the declaring the Keyframes with the css3.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
</head>
<style>
#animated_div
{
text-align:center;
width:60px;
height:40px;
background:#6699FF;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s infinite;
-moz-animation:animated_div 5s infinite;
-webkit-animation:animated_div 5s infinite;
border-radius:5px;
-webkit-border-radius:5px;
}
@keyframes animated_div
{
0% {left:0px;}
20% {left:50px; background-color: green;}
40% {left:140px; background-color: red;}
60% {left:280px; background-color: yellow;}
80% {left:425px; background-color: blue;}
100% {left:0px; background-color: pink;}
}
@-webkit-keyframes animated_div
{
0% {left:0px;}
20% {left:50px; background-color: green; margin-top: 50px;}
40% {left:140px; background-color: red;margin-top: 0px;}
60% {left:280px; background-color: yellow;margin-top: 50px;}
80% {left:425px; background-color: blue;margin-top: 0px;}
100% {left:0px; background-color: pink;}
}
@-moz-keyframes animated_div
{
0% {left:0px;}
20% {left:50px; background-color: green;}
40% {left:140px; background-color: red;}
60% {left:280px; background-color: yellow;}
80% {left:425px; background-color: blue;}
100% {left:0px; background-color: pink;}
}
</style>
<body>
<div id="animated_div">
CSS3
<span style="font-size:10px;">Tutorial</span>
</div>
</body>
</html>