Question

我有一个动画在所有浏览器中都能很好地运行，但是webkit却可以。在webkit中，它只显示1个旋转的圆圈，而其他圆圈则可以正常工作。动画预览在此处 - http://cssload.net/windows8.html

代码有什么问题？拜托，帮忙......

Answer 1

做到了！

问题在于你的内球类的不透明度，在google-chrome中他们需要在所有关键帧中设置。这种方法并没有打破野生动物园的影响。

@-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/

CSS3动画无法在webkit中运行

1 个答案: