Question

我的问题是我有一个简单的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; }
}

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

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

大多数建议似乎都需要“-webkit-”来为css中的“动画：”添加前缀。但我已经做到了。我错过了让这只鸟在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中工作

1 个答案: