Edit in JSFiddle

.box {
    width: 80px;
    height: 80px;
    border: 2px solid blue;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 50%;

}

.spin{
    z-index: 100;
    animation: spin 3s infinite linear;
    -webkit-animation: spin 3s infinite linear;
}

.container{
    height: 200px;
    width: 200px;
    position: relative;
    border: 1px dotted black;
    display: inline-block;
    vertical-align: top;
}

@-webkit-keyframes spin {
  0%   {background-color: crimson; -webkit-transform: rotate(0deg) scale(.05); -webkit-transform-origin: 33% 0%}
  13%  {background-color: red; -webkit-transform-origin: 67% 0%}
  25%  {background-color: orange; -webkit-transform-origin: 100% 33%}
  38%  {background-color: goldenrod; -webkit-transform-origin: 100% 67%}
  50%  {background-color: yellow; -webkit-transform: rotate(180deg) scale(4); -webkit-transform-origin: 67% 100% }
  63%  {background-color: green; -webkit-transform-origin: 33% 100%}
  75%  {background-color: blue; -webkit-transform-origin: 0% 67%}
  88%  {background-color: purple; -webkit-transform-origin: 0% 33%}
  100% {background-color: fuchsia; -webkit-transform: rotate(1440deg) scale(.05); -webkit-transform-origin: 33% 0%}
}

@keyframes spin {
  0%   {background-color: crimson; transform: rotate(0deg) scale(.05); transform-origin: 33% 0%}
  13%  {background-color: red; transform-origin: 67% 0%}
  25%  {background-color: orange; transform-origin: 100% 33%}
  38%  {background-color: goldenrod; transform-origin: 100% 67%}
  50%  {background-color: yellow; transform: rotate(180deg) scale(4); transform-origin: 67% 100% }
  63%  {background-color: green; transform-origin: 33% 100%}
  75%  {background-color: blue; transform-origin: 0% 67%}
  88%  {background-color: purple; transform-origin: 0% 33%}
  100% {background-color: fuchsia; transform: rotate(1440deg) scale(.05); transform-origin: 33% 0%}
}

.spin:hover {
    -webkit-animation-play-state: paused;
}

<div class="container">
    <div class="box spin"></div>
</div>
<div class="container">
    <div class="box">Animation by<br>Troy Whorten<br>3/17/2014</div>
</div>
<div class="container">
    <div class="box spin"></div>
</div>