CSS3 アニメーションを完了後も維持するにはどうすればよいですか?

CSS3 アニメーションの最終結果の保存

CSS アニメーションでは、「Hello World」テキストが予想どおりドロップダウンしますが、戻ります。完成したら元の位置に戻します。アニメーションが終了し、元のスタイルが再開されるため、この動作は自然です。ただし、最終結果を保持したい場合もあります。

これを実現するには、-webkit-animation-fill-mode プロパティを利用できます。 WebKit で導入され、iOS 4 および Safari 5 で実装されたこのプロパティを使用すると、アニメーションを (最後または最初のいずれかで) 継続するか、完了後に元の状態にリセットするかを選択できます。

-webkit- を設定することで、 anime-fill-mode を forwards に設定すると、アニメーションの終了状態が保持されます。これにより、アニメーションが完了した後でも、変更されたプロパティを保持できます。更新された CSS は次のとおりです:

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

これにより、「Hello World」テキストが 100 ピクセル下にドロップダウンし、無期限にそこに残り、追加の JavaScript や CSS トランジションを必要とせずにアニメーションの最終結果を保持します。

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