jquery - CSS3动画在webkit中不起作用

Question

我有一个动画在所有浏览器中都可以正常工作，但 webkit 除外。在 webkit 中，它只显示 1 个圆圈旋转，而其他所有 5 个圆圈都可以正常工作。动画预览在这里 - http://cssload.net/windows8.html

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

Answer 1

做到了！

问题是您的 innerball 类的不透明度，在 google-chrome 中，它们需要在所有关键帧中设置。这种方法并没有破坏 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/