CSS Animation not working in Chrome

Question

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.

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.

I have a problem: why doesn't my CSS animation act the same in Chrome as in Firefox?

I've tried the following solutions and looked at the following posts:

1. css3 animation not working in chrome
2. CSS Animation not working on Chrome
3. Chrome Keyframe animation not working

jquery:

<script>
$(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"});
    });

});

</script>

css:

<style type="text/css">

    /**.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;
}

</style>

html:

    <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;">


<div id="play">
    click here to play
</div>

Can someone please help?

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%?

Just found something that could be note worthy:

Changing: <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;">

to this: <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;">

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?

Answer 1

Firstly: Your jQuery has a mistake in it. Change the -webkit-animation-iteration-count from 0.9 to 0.7. Also, please take a look at: http://caniuse.com/#search=animation. You can see, that you have to use the prefix "-webkit" for google chrome. That is why, you need to define both of it in your img style tag. Like so:

<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;-webkit-animation-iteration-count: 0.1;">

A better way to do this, would be to define the iteration count in your stylesheet, not in the html. If you need different iteration counts for different img's, then this is not a good solution for you, ofcourse. Otherwise change:

3s linear 0s 1 normal forwards 

to

3s linear 0s 0.1 normal forwards

And leave the style in the img tags blank

For the stop and play part of your question:

jsfiddle.net/Lvq6ee8d/14/

For explanation: You know that your animation runs 3 seconds, so I have set a timeout function, which starts when the event "animationstart" is being triggered. Then after 300ms(3000ms/100*10 = 300ms) the animationplaystate is set to pause. So after 10%, the animation stops. And on hover, the animation continues. Also keep in mind, that in this example we need to change the css a little bit. We set the animation iteration to the desired amount, where we want the animation to be when it's finished(1 in my example), so we can use pause and running on it.