CSS3 Animation

<style>
 @-webkit-keyframes test-css {
  0%,100%  { opacity: 0;width:100px;margin-left:50px }
  50% { opacity: 1;width:200px;margin-left:200px  }
}
@-moz-keyframes test-css {
  0%,100%  { opacity: 0;width:100px;margin-left:50px }
  50% { opacity: 1;width:200px;margin-left:200px  }
}
@-o-keyframes test-css {
  0%,100%  { opacity: 0;width:100px;margin-left:50px }
  50% { opacity: 1;width:200px;margin-left:200px  }
}
@keyframes test-css {
  0%,100%  { opacity: 0;width:100px;margin-left:50px }
  50% { opacity: 1;width:200px;margin-left:200px  }
}
  
@-moz-keyframes ani
{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
  
  
@-moz-keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}  
  
.box
    {
          background-color:#000;
          width:100px;
          height:100px;
          position:relative;
          margin-left: 50px;
    }
#box {
  -webkit-animation: test-css 5s infinite; /* Safari 4+ */
  -moz-animation:    test-css 5s infinite; /* Fx 5+ */
  -o-animation:      test-css 5s infinite; /* Opera 12+ */
  animation:         test-css 5s infinite; /* IE 10+, Fx 29+ */
}
  
#box1
    {
      -webkit-animation: ani 5s infinite; /* Safari 4+ */
      -moz-animation:    ani 5s infinite; /* Fx 5+ */
      -o-animation:      ani 5s infinite; /* Opera 12+ */
      animation:         ani 5s infinite; /* IE 10+, Fx 29+ */
    }
 
#box2
    {
      -webkit-animation: move 10s steps(10) infinite alternate;
      -moz-animation:    move 10s steps(10) infinite alternate;
      -o-animation:      move 10s steps(10) infinite alternate;
      animation:         move 10s steps(10) infinite alternate;
    }
</style>
<div class="box" id="box">
    animation 1
</div>
<div style="margin-top:50px" ></div>
<div id="box1" class="box">
    animation 2
</div>  
<div style="margin-top:50px" ></div>
<div id="box2" class="box">
    animation 3
</div>

animation 1

animation 2

animation 3