Animation

/*
this is a code sample for CSS3 animations. In my samples I only include webkit properties. all other vendor prefixes are needed for animations.
*/
/*
base styles that are unrelated to the code sample
*/
.one {
width: 300px;
height: 300px;
margin: 2em auto;
border: 1px solid gray;
}
/*
set up keyframe animation first and label it. I named it test, but you can call it whatever you like. Then call it inside the class declaration below, just like a function.
*/
@-webkit-keyframes test {
from {
background: rgb(50,50,50);
}
to {
background: rgb(255,80,0);
}
}
@keyframes test {
from {
background: rgb(50,50,50);
}
to {
background: rgb(255,80,0);
}
}
/*
call the animation
*/
.one {
-moz-animation: test 5s;
-webkit-animation: test 5s;
-o-animation: test 5s;
animation: test 5s;
}