我正在尝试使用关键帧制作一个简单的动画,但它仅适用于 Chrome。这是代码(为了更短的帖子,我只包含一次关键帧代码):
@keyframes logokf {
0% {
background-image: url('gfx/logo1.png');
}
20% {
background-image: url('gfx/logo2.png');
}
40% {
background-image: url('gfx/logo3.png');
}
60% {
background-image: url('gfx/logo4.png');
}
80% {
background-image: url('gfx/logo1.png');
}
100% {
background-image: url('gfx/logo1.png');
}
}
@-webkit-keyframes logokf {
}
@-moz-keyframes logokf {
}
@-o-keyframes logokf {
}
@-ms-keyframes logokf {
}
#logo:hover {
float: left;
height: 75px;
margin: 28px 0 22px;
width: 276px;
/*animation-name*/
-webkit-animation-name:logokf;
-moz-animation-name:logokf;
-ms-animation-name:logokf;
-o-animation-name:logokf;
animation-name:logokf;
/*animation-duration*/
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
/*animation-timing-function*/
-webkit-animation-timing-function:lineare;
-moz-animation-timing-function:lineare;
-ms-animation-timing-function:lineare;
-o-animation-timing-function:lineare;
animation-timing-function:lineare;
/*animation-delay*/
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
有什么想法可以修复它或者其他浏览器尚不支持关键帧吗?
背景图像本身似乎不是有效的可转换财产。 http://www.w3.org/TR/css3-transitions/它可能碰巧在 Chrome 中工作,但这可能只是运气好。实施后,您将希望使用交叉淡入淡出能力 http://peter.sh/files/examples/cross-fading.html在 CSS 图像中。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)