CSS3动画无法在webkit中工作

我有一个动画，在所有浏览器中都能很好地工作，但是webkit的动画效果非常好。在webkit中，它只显示1个旋转的圆圈，而其他的则可以在5个圆圈内正常工作。动画预览在这里 - http://cssload.net/windows8.html CSS3动画无法在webkit中工作

代码有什么问题？请帮助...

来源

2012-10-30 Timur Gafforov

我的Safari浏览器刚开业5个圈旋转酷似Firefox浏览器。这个问题是铬的特定问题，我的Chrome只显示了1个圆，正如你所说的 –

我的Chrome只显示一个_stationary_圆，偶尔会淡出一次。 –

我记得Chrome在显示3d云的演示时遇到问题。各个元素在剪切平面随着云旋转而移动时被剪切。也许这是一个剪辑问题。 –

干了！

问题在于你的内圈类的不透明度，在谷歌浏览器中需要在所有关键帧中设置它们。这种方法并没有打破Safari的效果。

@-webkit-keyframes orbit { 
    0% { 
     opacity: 1; 
     z-index:99; 
     -webkit-transform: rotate(180deg); 
     -webkit-animation-timing-function: ease-out; 
     } 

    7% { 
     opacity: 1; 
     -webkit-transform: rotate(300deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:0%; 
     } 

    30% { 
     opacity: 1; 
     -webkit-transform:rotate(410deg); 
     -webkit-animation-timing-function: ease-in-out; 
     -webkit-origin:7%; 
     } 

    39% { 
     opacity: 1; 
     -webkit-transform: rotate(645deg); 
     -webkit-animation-timing-function: linear; 
     -webkit-origin:30%; 
     } 

    70% { 
     opacity: 1; 
     -webkit-transform: rotate(770deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:39%;  
     } 

    75% { 
     opacity: 1; 
     -webkit-transform: rotate(900deg); 
     -webkit-animation-timing-function: ease-out; 
     -webkit-origin:70%;  
     } 

    76% { 
     opacity: 0; 
     -webkit-transform:rotate(900deg); 
     } 

    100% { 
     opacity: 0; 
     -webkit-transform: rotate(900deg); 
     } 

}

这里的小提琴：

http://jsfiddle.net/q4wtm/27/

来源

2012-10-30 14:07:19

ooooo ...谢谢sooooo :) :) –

不客气！并且顺带一提，谢谢，否则我永远不会知道google-chrome和safari webkit的css3实现在某种程度上是不同的 –

CSS3动画无法在webkit中工作

回答

相关问题