CSS3动画在Firefox 14下 [英] CSS3 Animation under Firefox 14
问题描述
我在下列动画中遇到问题:
I'm having problems with the following animation:
.anim {
-moz-animation-delay: 0s;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 6s;
-moz-animation-fill-mode: forwards;
-moz-animation-name: animation_1;
-moz-animation-play-state: running;
-moz-animation-timing-function: linear;
-moz-transform-origin: right top;
background-image:url("http://jsfiddle.net/css/../img/logo.png");
height:25px;
width: 160px;
z-index: 1;
position: absolute;
}
.container {
left: 100px;
top: 100px;
position: absolute;
}
@-moz-keyframes animation_1 {
0% {
opacity: 1;
left:29.45px;
top:0;
-moz-transform: rotate(0deg) scale(2,2);
}
100% {
top:0;
opacity: 0.5;
left:120px;
top:120px;
-moz-transform: rotate(90deg) scale(0.5,0.5);
}
}
你可以看到这里的小提琴: http://jsfiddle.net/QTeXG/5/
You can see the fiddle here: http://jsfiddle.net/QTeXG/5/
嗯,同样的动画在Chrome 21中正常工作: http://jsfiddle.net/P2dKE/
Well, the same animation is working ok for Chrome 21: http://jsfiddle.net/P2dKE/
如果我:
- 删除动画在Firefox中的不透明度,它开始工作确定。
If I: - remove the opacity from the animation in Firefox it starts to work ok. - remove the background image and use a background color it also starts to work ok.
在Ubuntu 12.04,Firefox 14.0.1和Chrome 21.0.1180.57下测试了这个问题。
- 删除背景图片并使用背景颜色。 。
Tested under Ubuntu 12.04, Firefox 14.0.1 and Chrome 21.0.1180.57.
任何想法?
推荐答案
这在Firefox的版本> = 15中解决。
This is solved in versions >= 15 of Firefox.
这篇关于CSS3动画在Firefox 14下的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!