Post
Ask Question

Animation in CSS3

 

Css3 uses  @keyframes rule for the animation. Specify a CSS style inside the @keyframes rule ,the animation will gradually change from the current style to the new style.

<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:pink;
animation: one 10s;
-webkit-animation:one 10s; /* Safari and Chrome */
-moz-animation:one 10s; /* Firefox */
}

@keyframes one
{
0%   {background:red;}
25%  {background:gray;}
50%  {background:orange;}
100% {background:white;}
}

@-moz-keyframes one /* For Mozilla  Firefox */
{
0%   {background:red;}
25%  {background:gray;}
50%  {background:orange;}
100% {background:white;}
}
 
@-webkit-keyframes one /* Safari and  Google Chrome */
{
0%   {background:red;}
25%  {background:gray;}
50%  {background:orange;}
100% {background:white;}
}
</style>
</head>
<body>

<p><b>Note:</b>My Name is Mahak Gupta </p>
<p><b>Note:  Internet Explorer and Opera do not yet support the @keyframes or the animation property.
</b> </p>

<div></div>

</body>
</html>

 

Next Recommended Reading CSS3 Multiple Columns