css transitions

by Simplybj

HTML

<div class="movable">
  <p>
    This is some testing.
  </p>
</div>

CSS

.movable
{
  color:white;
  height:50px;width:200px;background-color:red;
  position: relative;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  0%   {top: 0px;  background: blue;transform: rotate(0deg);}
  25%  {top: 200px;background: blue;transform: rotate(20deg);}
  75%  {top: 50px;background: blue;transform: rotate(50deg);}
  100% {top: 100px;  background: blue;transform: rotate(0deg);}
}

/* Standard syntax */
@keyframes mymove {
  0%   {top: 0px;  background: blue;transform: rotate(0deg);}
  25%  {top: 200px;background: blue;transform: rotate(360deg);}
  75%  {top: 0px;background: blue;transform: rotate(-360deg);} 
  100% {}

}