ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。