CSS动画无法在Chrome中工作，在Safari中工作

我的问题是我有一个简单的twitter精灵表，我正在使用动画悬停。但是，在Chrome浏览器中，当它悬停时，它不会动画。CSS动画无法在Chrome中工作，在Safari中工作

#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 { 
from { background-position: 0 0; } 
to { background-position: -450px 0; } 
} 

@-moz-keyframes fly { 
    from { background-position: 0 0; } 
    to { background-position: -450px 0; } 
} 

@keyframes fly { 
    from { background-position: 0 0; } 
    to { background-position: -450px 0; } 
}

我看到几个人的职位一下：

而且大部分的建议似乎是“-webkit-”在css for chrome前面加上“animation：”。但我已经做到了。我错过了什么让这只鸟在镀铬以及它在Safari和Firefox中发挥作用？如果必须，我会使用Javascript或jQuery。谢谢！

来源

2016-07-25 Acoustic77

看完这个之后，只要用JS做就可以了，如果你想在另一个元素上徘徊时瞄准另一个元素，只需坚持Js，所有的东西都不要告诉人们他们会遇到浏览器不一致的问题喜欢这个。 –

你的财产

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

可能是错误的。如果你想说，没有延迟，使其更清晰，并设置单元

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

但是，这将相当于

animation: fly 0.2s steps(3) 3;

这是一个比较常用的方法来设置它

来源

2016-07-25 21:28:04 vals

哇，就是这样！优秀的眼睛，谢谢 – Acoustic77

CSS动画无法在Chrome中工作，在Safari中工作

回答

相关问题