html - CSS animation not working in Chrome, working in Safari -


my issue have simple twitter sprite sheet i'm using animate on hover. but, in chrome, while scoots left on hover, doesn't animate.

#tw:hover #twitter-bird {     margin-left:-100px;     -webkit-animation: fly 0.2s steps(3) 0 3;     -moz-animation: fly 0.2s steps(3) 0 3;     animation: fly 0.2s steps(3) 0 3; }  @-webkit-keyframes fly { { background-position: 0 0; } { background-position: -450px 0; } }  @-moz-keyframes fly {     { background-position: 0 0; }     { background-position: -450px 0; } }  @keyframes fly {     { background-position: 0 0; }     { background-position: -450px 0; } } 

i have seen few others posts this:

  1. css animation not working in chrome
  2. css animation not working in chrome
  3. css3 animation not working in chrome
  4. css animation not working on chrome

and of advice seems "-webkit-" needed preface "animation: " in css chrome. i've done that. missing bird flap in chrome in safari , firefox? i'll use javascript or jquery if have to. thank you!

your property

animation: fly 0.2s steps(3) 0 3; 

is wrong. if want there no delay, make clearer , set unit

animation: fly 0.2s steps(3) 0s 3; 

but equivalent

animation: fly 0.2s steps(3) 3; 

that more usual way set it


Comments

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -