CSS关键帧只能在Chrome中使用 [英] CSS keyframes only works in Chrome
本文介绍了CSS关键帧只能在Chrome中使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用关键帧制作简单的动画,但它只能在Chrome中使用。这里是代码(我只包括关键帧代码一次,较短的帖子):
i'm trying to make a simple animation using keyframes, but it only works in Chrome. Here is the code (i've only included keyframes code once, for shorter post):
@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;
}
我如何修复它或关键帧的任何想法但支持其他浏览器?
Any thoughts of how can i fix it or keyframes are not yet supported from other browsers?
推荐答案
background-image本身似乎不是一个有效的可转换属性。它可能会在Chrome中工作,但它可能只是幸运。实施后,您将希望在CSS图片中使用交叉淡化功能 。
background-image itself does not appear to be a valid transitionable property. It may happen to work in Chrome, but it's probably just lucky. When it's implemented, you'll be looking to use the crossfade capability in CSS images.
这篇关于CSS关键帧只能在Chrome中使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文