为什么我的 CSS :hover @keyframes 动画不起作用？ [关闭]答案

【问题标题】：Why is my CSS :hover @keyframes animation not working? [closed]为什么我的 CSS :hover @keyframes 动画不起作用？ [关闭]
【发布时间】：2013-06-11 02:11:17
【问题描述】：

我是新手。为什么这段代码不起作用？我想让小鸟飞起来。

我的html：

<img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" />
<br>
<div class="twitter-bird"></div>

我的 CSS：

.twitter-bird {
    background-image: url(http://dl.dropboxusercontent.com/u/105046436/tw.png);
    display: inline-block;
    height: 38px;
    width: 37.5px;
}

.twitter-bird:hover {
    animation: fly 0.2s steps(3) 0 infinite;
}

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

JSFiddle : http://jsfiddle.net/6qHMG/

我想要什么：

我想改变图片的背景位置。

会发生什么：

悬停时图像位置不会改变。

编辑：我认为背景图像位置没有正确改变。背景位置似乎没有改变。如何在@keyframes fly 中设置background-position:？

【问题讨论】：

嗯，它有什么作用？它什么都不做吗？犯错？让你的电脑崩溃？让飞猴从天上掉下来？给你免费的华夫饼？请澄清。
是的，如果它给你免费的华夫饼，请告诉我们，如果是这样，我肯定会尝试重新创建这个“错误”
@sinhayash：Stack Overflow 不是帮助网站。这是一个问答网站。见stackoverflow.com/questions/how-to-ask
Stack Overflow 不是免费的“请为我修复代码，谢谢”网站。我和这里的所有其他用户回答问题是因为我们自愿回答，如果您不努力解决您的问题，那么我们也不会。
再说一次，我们不是免费的代码修复支持人员！请阅读 Paul 给您的链接。

标签： html css cross-browser css-animations

【解决方案1】：

这里是：

你必须添加供应商前缀

.twitter-bird {
    height: 38px;
    width: 37.5px;
    background-image: url("http://dl.dropboxusercontent.com/u/105046436/tw.png");
}

.twitter-bird:hover { 
    -webkit-animation: fly .4s steps(3) infinite;
       -moz-animation: fly .4s steps(3) infinite;
        -ms-animation: fly .4s steps(3) infinite;
         -o-animation: fly .4s steps(3) infinite;
            animation: fly .4s steps(3) infinite;
}

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

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

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

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

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

小提琴：http://jsfiddle.net/6qHMG/4/

【讨论】：

chrome、safari 和 opera 需要供应商前缀。 ie和firefox，支持标准关键字。