3

この JSFiddle を見てください: http://jsfiddle.net/Grimdotdotdot/URrLW/

Firefox では、期待どおりにアニメーション化されます。内側の赤い円がぐるぐる回って、外側の青い円がさまざまな速度で反対方向に回転し、フェードインとフェードアウトします。

これは以前は Chrome で正常に機能していましたが、最新の 21.0.1180.75 m への更新以降、外側の青い円が回転しなくなりました。

Chrome でのアニメーションの CSS は次のとおりです。

@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    40% { -webkit-transform:rotate(145deg); opacity:1;}
    80% { -webkit-transform:rotate(-320deg); opacity:0; }
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}

問題は不透明度です-それを削除すると、アニメーションは正常に機能します（ただし、表示されるため最後にジャンプします）：http://jsfiddle.net/Grimdotdotdot/BVXwR/

それはバグですか、それとも CSS の書き方が間違っていますか?

ボーナス ポイント: IE9 で同じアニメーションを実現するにはどうすればよいですか?

4

1 に答える 1

1

だから私も似たような状況です。特定のページで多数の div をアニメーション化しようとしています。それらはソースでレンダリングされていますが、それら (およびその子要素) は最新の Chrome では完全に不透明です。私は（私の場合）問題を突き止めたと信じています。私はSassとBourbon mixin libをRailsアプリでThoughtbotの人たちから使用していますが、状況は似ています。解決策はWebkit仕様のいくつかの場所で実際に概説されているため、これが本当にバグと見なされるかどうかはわかりません-実際、現状では、これを正しく取得したのはChromeだけであり、彼らはこれをサポートし始めたばかりです（サファリはサポートしていませんが？）。とにかく、両方のアニメーション塗りつぶしモードで変換をアニメーション化しようとすると明らかです。これが古いバージョンの Chromium と Safari で動作することを確認しました。これは、最新の Chrome アップデート以降にアプリケーションで発生した最近の問題です。とにかく、私のsassコードはこのようなものです

.animation-tilefill {
  @include animation(tilefill 0.25s $ease-out-sine);
  @include animation-fill-mode(both); 
}
@mixin tilefill {
  0% {
    opacity: 0;
     // @include transform(scale(0.0)); // <= There's our issue
     // @include transform-origin(left top); 
  }
  80% {
     // @include transform(scale(1));
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes tilefill { @include tilefill; }
   @-moz-keyframes tilefill { @include tilefill; }
        @keyframes tilefill { @include tilefill; }

これが何をしているのかを知るには、バーボンとサスを少し知っている必要がありますが、この回答の必要性のために、要素の不透明度と同様にスケール変換をアニメーション化すると言えば十分です。このコードの問題は、実際には変換自体とは何の関係もありませんが、0.0 VALUE - ゼロ値がキーです。ここを見ると、 Safari CSS リファレンスを見ると、animation-fill-modeの両方の説明に次のように表示されます。

「アニメーションの初期キーフレームは、アニメーション スタイルが要素に適用されるとすぐに適用され、アニメーションの最後のキーフレームは、アニメーションの最後の反復が完了した後も引き続き適用されます。初期キーフレームは、-webkit の値がゼロ以外のアニメーションにのみ影響します。 -アニメーション遅延."

重要な部分は、最初のキーフレームが -webkit-animation-delay のゼロ以外の値を持つアニメーションにのみ影響します。

  0% {
    opacity: 0;
     @include transform(scale(0.01)); // <= There's our issue
     @include transform-origin(left top); 
  }

それが変更されたら、問題は解決しました - これが役に立てば幸いです。一部の人々がこれのサポートについてどう思うか知りたいのですが:)

于 2012-08-20T20:22:18.713 に答える