CSS Keyframes

Keyframes rule for Gecko and Webkit browsers.

HTML

<div>

</div>

CSS

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

@keyframes mymove {
  0% {left:0px; top: -100px;}
  25% {left:100px; top: 0px;}
  50%{left: 150px; top: 20px;}
  75%{left:100px; top: 50px;}
  100%{left:0px; top: 0px;}
}