我在使用以下动画时遇到问题:
.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/
好吧,同样的动画适用于 Chrome 21:http: //jsfiddle.net/P2dKE/
如果我: - 从 Firefox 中的动画中删除不透明度,它开始正常工作。- 删除背景图像并使用背景颜色,它也开始正常工作。
在 Ubuntu 12.04、Firefox 14.0.1 和 Chrome 21.0.1180.57 下测试。
有任何想法吗?