title: CSS Animation not working in Chrome
body: <p>Some insight into the project:
  A full interactive website, where animations will play.. then they'll stop, once they've stopped and a mouseover event on an animation occurs it will play until 70% of the animation is complete, when clicking on another object (in this case text) it will complete it's cycle.</p>
  
  <p>My project partner made the animation in Google web designer, we've tried multiple programs for our project such as Adobe Edge, but unfortunately due to the size of our animations we are unable to use SVG or PNG sequences, and the same goes for spritesheets.. so we arrived at css animations, unfortunately my knowledge of css animations is quite limited and I was wondering if anyone would be able to help me out.</p>
  
  <p>I have a problem: why doesn't my CSS animation act the same in Chrome as in Firefox?</p>
  
  <p>I've tried the following solutions and looked at the following posts:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/12265096/css3-animation-not-working-in-chrome">css3 animation not working in chrome</a></li>
  <li><a href="https://stackoverflow.com/questions/21939736/css-animation-not-working-on-chrome">CSS Animation not working on Chrome</a></li>
  <li><a href="https://stackoverflow.com/questions/25003675/chrome-keyframe-animation-not-working">Chrome Keyframe animation not working</a></li>
  </ol>
  
  <p>jquery:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      //$('.gwd-img-r1sa').toggle(function () {
      //    $('.gwd-img-r1sa').css({"animation-play-state":"paused","-webkit-animation-play-state":"paused"});
      //}, function () {
      //    $('.gwd-img-r1sa').css({"animation-play-state":"running","-webkit-animation-play-state":"running"});
      //});
  
      $(".gwd-img-r1sa").on("mouseenter", function(){
          $(".gwd-img-r1sa").css({"animation-iteration-count":"0.7", "-webkit-animation-iteration-count":"0.9"});
      });
  
      $("#play").on("click", function(){
          $(".gwd-img-r1sa").css({"animation-iteration-count":"1", "-webkit-animation-iteration-count":"1"});
      });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
      /**.gwd-img-r1sa:hover, .gwd-img-r1sa:focus
  {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
  }
  **/
  
  html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
  }
  
  body {
    background-color: transparent;
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -webkit-perspective: 1400px;
    -moz-perspective: 1400px;
    perspective: 1400px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .gwd-img-r1sa {
    position: absolute;
    width: 192px;
    height: 146px;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    left: 312px;
    top: 604px;
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  
  @-webkit-keyframes gwd-empty-animation {
    0% { opacity: 0.001; }
    100% { opacity: 0; }
  }
  @-moz-keyframes gwd-empty-animation {
    0% { opacity: 0.001; }
    100% { opacity: 0; }
  }
  @keyframes gwd-empty-animation {
    0% { opacity: 0.001; }
    100% { opacity: 0; }
  }
  @-webkit-keyframes gwd-gen-hlergwdanimation_gwd-keyframes {
    0% { left: 312px; top: 604px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; }
    30% { left: 595px; top: 350px; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear; }
    50% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-animation-timing-function: linear;}
    100% { left: 595px; top: 350px; -webkit-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); -webkit-animation-timing-function: linear; }
  }
  @-moz-keyframes gwd-gen-hlergwdanimation_gwd-keyframes {
    0% { left: 312px; top: 604px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; }
    30% { left: 595px; top: 350px; -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; }
    50% { left: 595px; top: 350px; -moz-transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-animation-timing-function: linear; }
    100% { left: 595px; top: 350px; -moz-transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); -moz-animation-timing-function: linear; }
  }
  @keyframes gwd-gen-hlergwdanimation_gwd-keyframes {
    0% { left: 312px; top: 604px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; }
    30% { left: 595px; top: 350px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; }
    50% { left: 595px; top: 350px; transform: matrix3d(0.0510417556, 0.9986965201, 0, 0, -0.9986965201, 0.0510417556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); animation-timing-function: linear; }
    100% { left: 595px; top: 350px; transform: matrix3d(0.051, 0.9987, 0, 0, -0.9987, 0.051, 0, 0, 0, 0, 1, 0, 312, 146, 0, 1); animation-timing-function: linear; }
  }
  body .gwd-gen-hlergwdanimation {
    -webkit-animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards;
    -moz-animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards;
    animation: gwd-gen-hlergwdanimation_gwd-keyframes 3s linear 0s 1 normal forwards;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="animation-iteration-count: 0.1;"&gt;
  
  
  &lt;div id="play"&gt;
      click here to play
  &lt;/div&gt;
  </code></pre>
  
  <p>Can someone please help?</p>
  
  <p>Also: Why does the image move, then stop.. then on hover it sometimes skips to 30% instead of playing until 30%? the same goes for skipping to 70% instead of playing until 70%?</p>
  
  <p>Just found something that could be note worthy:</p>
  
  <p>Changing: <code>&lt;img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="animation-iteration-count: 0.1;"&gt;</code></p>
  
  <p>to this: <code>&lt;img src="3ds_preset_gearshape.png" class="gwd-img-r1sa gwd-gen-hlergwdanimation" data-gwd-style="" data-gwd-override-style="" style="-webkit-animation-iteration-count: 0.1;"&gt;</code></p>
  
  <p>causes this bit of the animation to work in Chrome, but why didn't it work when I had this in the styles segment of my document?</p>