WebKit の CSS3 アニメーションの最終状態を維持するにはどうすればよいですか?

終了状態を維持する Webkit CSS アニメーション

CSS3 アニメーションでは、アニメーション化された要素が終了状態の後に元の状態に戻るという問題が発生することがあります。アニメーションが完了します。これは、アニメーションが要素に適用される一時的な変換であり、アニメーションが終了すると、要素の元のスタイルが引き継がれるという事実に起因すると考えられます。

ただし、終了位置を変更できる回避策が存在します。粘着質。」 -webkit-animation-fill-mode プロパティを使用すると、アニメーションの終了状態を保持できます。

たとえば、次の CSS アニメーションを考えてみましょう:

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}</code>

アニメーションの後、要素は元の位置に戻ります。これを防ぐには、CSS に次の行を追加します。

<code class="css">-webkit-animation-fill-mode: forwards;</code>

この追加により、要素はアニメーションが完了した後でも、翻訳された位置 (100px) を維持します。このプロパティは WebKit で導入され、iOS 4 および Safari 5 以降でサポートされています。

以上がWebKit の CSS3 アニメーションの最終状態を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。