CSS3动画在任何浏览器中都不起作用答案

【问题标题】：CSS3 Animation not working in any browsersCSS3动画在任何浏览器中都不起作用
【发布时间】：2012-11-22 04:12:55
【问题描述】：

我正在使用精灵和 CSS3 动画来尝试进行翻转。它在 CODA 2 中有些工作，但是当我在 Mozilla、Chrome、Safari 和 Opera 中测试时，动画不会出现。

/*linkedin contact button*/
button{text-indent:-99999px; border: none; }
a.linkedin,a.linkedin:hover{display: block; cursor: pointer; background: url(../img/linked.png) no-repeat; width: 128px; height: 128px}
a.linkedin{background-position: -0 -0}
a.linkedin:hover{animation:first 1000s; -moz-animation:first 1000s; -webkit-animation:first 1000s; -o-animation:first 1000s;}

@keyframes first{from {background-position: -140px -0;} to {background-position: -0px -0;}}
@-moz-keyframes first{from {background-position: -140px -0;} to {background-position: -0 -0;}}
@-webkit-keyframes first{from {background-position: -140px -0;} to {background-position: -0 -0;}}
@-o-keyframes first{from {background-position: -140px -0;} to {background-position: -0 -0;}}
*a.linkedin:hover{background-position: -140px -0/9}/*for ie*/

【问题讨论】：

请同时添加一些 HTML，或者更好的是，在jsfiddle.net 中提供示例。单独的 css 很难调试。
对于 0 你可以省略单位。

标签： css sprite css-animations

【解决方案1】：

为什么不直接使用 CSS3 过渡？如果你所做的只是改变背景位置，创建关键帧有点过头了。看到这个jsfiddle：

http://jsfiddle.net/RfbhD/3/

您需要的所有 CSS：

a.linkedin {
    background: url(http://placekitten.com/300/128) 0 0 no-repeat; 
    cursor: pointer;
    display: block;
    width: 128px; 
    height: 128px; 

    -webkit-transition: background-position 1s ease; 
       -moz-transition: background-position 1s ease; 
         -o-transition: background-position 1s ease; 
            transition: background-position 1s ease; 
}

a.linkedin:hover{
    background-position: -140px 0; 
}

【讨论】：