css3-xhtml tutorial: keyframes rule or the animation property

Syntax : @keyframes rule or the animation property

@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animation-backcolor </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{
width:300px;
height:300px;
background:#663399;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75%{background:white;}
100% {background:green;}
}
</style>
</head>
<body>
<div>Hello World. Hover over the div element above, to see the transition effect.
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</div>
</body>
</html>

Tuesday, 27 December 2011

keyframes rule or the animation property