CSS 动画在 Chrome 中不工作，在 Safari 中工作

Question

我的问题是我有一个简单的 Twitter 精灵 sheet，我用它在悬停时设置动画。但是，在 Chrome 中，当它在悬停时向左移动时，它没有动画。

#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; }
}

我看过其他一些帖子：

CSS Animation not working in Chrome
CSS Animation not working in Chrome
css3 animation not working in chrome
CSS Animation not working on Chrome

大多数建议似乎是 css 中 chrome 中的 "animation: " 前需要“-webkit-”。但我已经做到了。我错过了什么才能让这只鸟在 chrome 中像在 Safari 和 Firefox 中那样振翅飞翔？如果需要，我会使用 Javascript 或 jQuery。谢谢！

Answer 1

你的属性

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

可能是错误的。如果要说没有延迟，说清楚一点，设置单位

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

但这等同于

animation: fly 0.2s steps(3) 3;

这是比较常用的设置方式

CSS 动画在 Chrome 中不工作，在 Safari 中工作

CSS animation not working in Chrome, working in Safari

html

css

animation

webkit

google-chrome