title: css3 - animation/keyframes browser issue
body: <p>I am having some problems when running this animation in Chrome:</p>
  
  <pre><code>.login-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -60px;
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 10px solid #19bee1;
  }
  .login-loading:after {
    content: '';
    background: trasparent;
    width: 140%;
    height: 140%;
    position: absolute;
    border-radius: 100%;
    top: -20%;
    left: -20%;
    opacity: 0.7;
    box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
      -webkit-animation:rotates 2s infinite linear;
      -moz-animation:rotates 2s infinite linear;
      -o-animation:rotates 2s infinite linear;
    animation: rotates 2s infinite linear;
  }
  
  @keyframes rotates {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  @-webkit-keyframes rotates {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  @-moz-keyframes rotates {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  @-o-keyframes rotates {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  </code></pre>
  
  <p>It's a loader which have a spinning "tail". My issue is that the animation is not moving/running. I am using Google Chrome.</p>