CSS animation

Taken from http://www.phpied.com/css-animations-off-the-ui-thread/

by Salvador Dali

HTML

<p><div class="spin"></div>
  <p><div class="walkabout-old-school"></div>
  <p><div class="walkabout-new-school"></div>

CSS

.spin {
  -webkit-animation: 3s rotate linear infinite;
  animation: 3s rotate linear infinite;
  background: red;
}
.walkabout-old-school {
  -webkit-animation: 3s slide-margin linear infinite;
  animation: 3s slide-margin linear infinite;
  background: blue;
}
.walkabout-new-school {
  -webkit-animation: 3s slide-transform linear infinite;
  animation: 3s slide-transform linear infinite;
  background: green;
}

/* keyframes */
@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes slide-transform {
  from {transform: translatex(0);}
  50% {transform: translatex(300px);}
  to {transform: translatex(0);}
}
@keyframes slide-margin {
  from {margin-left: 0;}
  50% {margin-left: 100%;}
  to {margin-left: 0;}
} 

/* same keyframes, prefixed */
@-webkit-keyframes rotate {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes slide-transform {
  from {-webkit-transform: translatex(0);}
  50% {-webkit-transform: translatex(300px);}
  to {-webkit-transform: translatex(0);}
}
@-webkit-keyframes slide-margin {
  from {margin-left: 0;}
  50% {margin-left: 100%;}
  to {margin-left: 0;}
}

div {
  width: 30px;
  height: 30px;
}