CSS3动画在webkit中不起作用答案

【问题标题】：CSS3 animation not working in webkitCSS3动画在webkit中不起作用
【发布时间】：2012-10-30 13:27:00
【问题描述】：

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

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

【问题讨论】：

我的 safari 刚刚打开了 5 个循环，就像 Firefox 一样旋转。问题是特定于 chrome 的，正如你所说，我的 chrome 只显示了 1 个圆圈
我的 chrome 只显示一个 stationary 圆圈，偶尔会淡出。
我记得 Chrome 在显示 3d 云演示时遇到问题。单个元素被剪裁平面在云旋转上移动。也许这是一个剪辑问题。
是的，刚刚安装了 safari，它在其中运行良好...有人知道如何解决这个问题吗？

标签： jquery ajax google-chrome animation preloader

【解决方案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/

【讨论】：

不客气！顺便说一句，谢谢你，否则我永远不会知道来自 google-chrome 和 safari webkit 的 css3 实现会有所不同