CSS动画在Chrome中不起作用，在Safari中起作用答案

【问题标题】：CSS animation not working in Chrome, working in SafariCSS动画在Chrome中不起作用，在Safari中起作用
【发布时间】：2016-07-25 19:46:17
【问题描述】：

我的问题是我有一个简单的 Twitter 精灵表，我用它来设置悬停动画。但是，在 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; }
}

我看过其他一些关于此的帖子：

大多数建议似乎是在 chrome 的 css 中需要“-webkit-”作为“animation:”的前缀。但我已经做到了。为了让这只鸟在 chrome 中以及在 Safari 和 Firefox 中一样，我缺少什么？如果必须，我会使用 Javascript 或 jQuery。谢谢！

【问题讨论】：

看完这个之后，就用JS来做吧人们会遇到这样的浏览器不一致。

标签： html css google-chrome animation webkit

【解决方案1】：

您的财产

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

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

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

但这相当于

animation: fly 0.2s steps(3) 3;

这是一种更常用的设置方式

【讨论】：