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:
- css animation not working in chrome
- css animation not working in chrome
- css3 animation not working in chrome
- 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
Post a Comment