1

Webkit以外のすべてのブラウザーで完全に機能するアニメーションがあります。Webkitでは、1つの円だけが回転しているのに対し、他の円は5つの円すべてで正常に機能します。アニメーションのプレビューはこちら-http://cssload.net/windows8.html

コードの何が問題になっていますか？助けてください...

4

1 に答える 1

3

それをやった！

問題は、インナーボールクラスの不透明度でした。グーグルクロームでは、すべてのキーフレームに設定する必要がありました。このアプローチは、サファリの効果を壊しませんでした。

@-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-30T14:07:19.027 に答える