/* 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; }