title: Css Animation not working in Google Chrome
body: <p>I am trying to use <a href="http://codepen.io/domeri/pen/ExjvK" rel="nofollow">this</a> loader in my web site, scc animation works well in Firefox &amp; IE but doesn't work in Google Chrome.</p>
  
  <pre><code>#loader{
      width: 820px;
      height: 670px;
      border: none;
      overflow: hidden;
      margin: 0px 70px;
      background: #0d8aa5;
      position: relative;
  }
  
  #innerloader{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -60px;
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 10px solid #19bee1;
  }
  
  
  #innerloader: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: rotate 2s infinite linear;
       -moz-animation: rotate 2s infinite linear;
        -ms-animation: rotate 2s infinite linear;
         -o-animation: rotate 2s infinite linear;
            animation: rotate 2s infinite linear;
  }
  
  @keyframes rotate {
    0% {
      -webkit-transform: rotateZ(0deg);
         -moz-transform: rotateZ(0deg);
          -ms-transform: rotateZ(0deg);
           -o-transform: rotateZ(0deg);
              transform: rotateZ(0deg);
    }
    100% {
      -webkit-transform: rotateZ(360deg);
         -moz-transform: rotateZ(360deg);
          -ms-transform: rotateZ(360deg);
           -o-transform: rotateZ(360deg);
              transform: rotateZ(360deg);
    }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="loader"&gt;&lt;div id="innerloader"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>P.S. <a href="http://codepen.io/domeri/pen/ExjvK" rel="nofollow">Here</a> it's working correctly also in google chrome....</p>