CSS3 Animation Not Working in Chrome

css3 animation not working in chrome

You have to put the general animation rule after the browser specific ones:

-webkit-animation: aia2 5s linear infinite alternate;
   -moz-animation: aia2 5s linear infinite alternate;
    -ms-animation: aia2 5s linear infinite alternate;
     -o-animation: aia2 5s linear infinite alternate;
        animation: aia2 5s linear infinite alternate; /* this comes last */

And since you have -webkit-animation: aia2, -moz-animation: aia2 etc. you have to set the animation for each browser like:

@-moz-keyframes aia2{
    ...
}

@-webkit-keyframes aia2{
    ...
}
@-o-keyframes aia2{
    ...
}

Css Keyframes & Animation will not run on either Google Chrome or Firefox

You need to declare the default keyframes rule not just the webkit prefix.

#block{
  width:20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  animation: block 1s infinite linear;
  -webkit-animation: block 1s infinite linear;
}
@keyframes block {
  0% { left: 480px; }
  100% { left: -40px; }
}
@-webkit-keyframes block
{
  0% { left: 480px; }
  100% { left: -40px; }
}

Also your timing on the -webkit-animation was a lowercase L I think you meant to put a 1 there.

Edit: Keyframes was also misspelled as noted by @disinfor and the animation would work in Chrome and FF without the default @keyframes/animation rules, also with the default and without the prefix making it purely a spelling error issue.

CSS 3 Keyframes animation doesn't work in Chrome

You need to use the -webkit- vendor prefix

@-webkit-keyframes move {
     0% {
         left: 0%;
     }
     100% {
         left: 100%;
     }
 }

You'll also need to add it to any animation properties (as well as keeping those without it for support in other browsers), e.g:

-webkit-animation-name:move;

More on vendor prefixes:

CSS vendor prefixes or CSS browser prefixes are a way for browser
makers to add support for new CSS features in a sort of testing and
experimentation period. Browser prefixes are used to add new features
that may not be part of a formal specification and to implement
features in a specification that hasn’t been finalized.

The MDN article on animation is also a good read

CSS Animation not working in Chrome

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.

---

Related Topics