<!DOCTYPE html>
<html>
<head>
<style>
@keyframes anim
{
from {background:#fff;}
to {background:#00ff;}
}
@-webkit-keyframes anim /*Safari and Chrome*/
{
from {background:#000;}
to {background:#090909;}
}
div
{
width:200px;
height:200px;
background:#333;
position:relative;
animation:anim 10s ;
-webkit-animation:anim 5s; /*Safari and Chrome*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
An animation is an effect that lets an element gradually change from one style to another.
You can change as many styles you want, as many times you want.
Syntax: @keyframes animationname {keyframes-selector {css-styles;}}
animationname required defines the name of the animation.
keyframes-selector required percentage of the animation duration.
Legal values is 0-100%.
from (same as 0%)
to (same as 100%)
css-styles required one or more legal CSS style properties.
0 Comment(s)