javascript - CSS Animation not working in Chrome -

javascript - CSS Animation not working in Chrome -

some insight project: total interactive website, animations play.. they'll stop, 1 time they've stopped , mouseover event on animation occurs play until 70% of animation complete, when clicking on object (in case text) finish it's cycle.

my project partner made animation in google web designer, we've tried multiple programs our project such adobe edge, unfortunately due size of our animations unable utilize svg or png sequences, , same goes spritesheets.. arrived @ css animations, unfortunately knowledge of css animations quite limited , wondering if able help me out.

i have problem: why doesn't css animation deed same in chrome in firefox?

i've tried next solutions , looked @ next posts:

css3 animation not working in chrome css animation not working on chrome 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 play </div>

can please help?

also: why image move, stop.. on hover skips 30% instead of playing until 30%? same goes skipping 70% instead of playing until 70%?

just found 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 bit of animation work in chrome, why didn't work when had in styles segment of document?

firstly: jquery has error in it. alter -webkit-animation-iteration-count 0.9 0.7. also, please take at: http://caniuse.com/#search=animation. can see, have utilize prefix "-webkit" google chrome. why, need define both of in img style tag. 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 improve way this, define iteration count in stylesheet, not in html. if need different iteration counts different img's, not solution you, ofcourse. otherwise change:

3s linear 0s 1 normal forwards

to

3s linear 0s 0.1 normal forwards

and leave style in img tags blank

for stop , play part of question:

jsfiddle.net/lvq6ee8d/14/

for explanation: know animation runs 3 seconds, have set timeout function, starts when event "animationstart" beingness triggered. after 300ms(3000ms/100*10 = 300ms) animationplaystate set pause. after 10%, animation stops. , on hover, animation continues. maintain in mind, in illustration need alter css little bit. set animation iteration desired amount, want animation when it's finished(1 in example), can utilize pause , running on it.

javascript jquery html css css3