keyframes

1//css keyframes
2#image{
3	  width: 100px;
4	  height: 100px;
5	  background-color: red;
6	  position: relative;
7	  animation: monFrame 5s linear 2s infinite alternate;
8
9	}
10	@keyframes monFrame {
11	  0%   {left:0px; top:0px;}
12	  25%  {left:500px; top:0px;}
13	  50%  {left:500px; top:500px;}
14	  75%  {left:0px; top:500px;}
15	  100% {left:0px; top:0px;}
16     } 

1@keyframes mymove {
2  from {top: 0px;}
3  to {top: 200px;}
4}

1@keyframes mymove {
2  0% {top: 0px;}
3  50% {top: 50px;}
4  75% {top: 40px;}
5  100%{top: 0px;}
6}

1/* @keyframes duration | easing-function | delay |
2iteration-count | direction | fill-mode | play-state | name */
3animation: 3s ease-in 1s 2 reverse both paused slidein;