CSS Keyframes

Keyframes rule for Gecko and Webkit browsers.

by Sub Lines

HTML

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>

<div></div>

CSS

body {padding:40px;}
div {
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove {
  from {top:0px;}
  to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */ {
  from {top:0px;}
  to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */ {
  from {top:0px;}
  to {top:200px;}
}