We would like to know how to create Keyframe based color animation.
<!DOCTYPE html>
<html>
<style>
div {<!-- ww w . j a v a2s .c om-->
width: 100px;
height: 100px;
background: red;
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@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;}
}
@-o-keyframes myfirst /* Opera */ {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
</body>
</html>
The code above is rendered as follows: