CSS3动画在任何浏览器中都不工作
我正在使用一个精灵和CSS3动画,试图进行翻滚。它在Coda2中有些工作,但是当我在Mozilla、Chrome、Safari和Opera中测试时,动画不会出现CSS3动画在任何浏览器中都不工作,css,sprite,css-animations,Css,Sprite,Css Animations,我正在使用一个精灵和CSS3动画,试图进行翻滚。它在Coda2中有些工作,但是当我在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)
/*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*/
为什么不直接使用CSS3转换呢?如果您所做的只是更改背景位置,那么创建关键帧有点过头了。请参阅此JSFIDLE: 您需要的所有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;
}
还请添加一些HTML,或者更好,在中提供一个示例。css本身很难调试。但是对于0,您可以省略单元。