ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3でアニメーション終了時に消えない効果を実現する方法
css3 では、「animation-fill-mode」属性を使用して、アニメーションが終了しても消えない効果を実現できます。この属性は、アニメーションが再生されていないときの要素のスタイルを指定できます。属性が forwards に設定されている場合、アニメーション効果は消えません。構文は「animation-fill-mode:forwards」です。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
animation-fill-mode 属性は、アニメーションが再生されないとき(アニメーションが完了したとき、またはアニメーションが再生されないとき)を規定します。アニメーションに遅延があり、再生が開始されません)、要素に適用するスタイル。
デフォルトでは、CSS アニメーションは最初のキーフレームが再生されるまで要素に影響を与えず、最後のキーフレームが完了すると要素への影響を停止します。 anime-fill-mode プロパティはこの動作をオーバーライドします。
CSS 構文
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
none デフォルト値。アニメーションは、アニメーションの実行前または実行後にターゲット要素にスタイルを適用しません。
forwards アニメーションが終了した後 (animation-iteration-count によって決定)、アニメーションはこのプロパティ値を適用します。
backwards アニメーションは、アニメーション遅延定義中にアニメーションの最初の反復を開始したキーフレームで定義されたプロパティ値を適用します。これらは、キーフレームからの値 (アニメーションの方向が "normal" または "alternate" の場合)、またはキーフレームへの値 (アニメーションの方向が "reverse" または "alternate-reverse" の場合) です。
どちらのアニメーションも、前進と後退のルールに従います。つまり、アニメーションはアニメーション プロパティを両方向に拡張します。
initial このプロパティをデフォルト値に設定します。
inherit このプロパティを親要素から継承します。
#例は次のとおりです:
<html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:2; animation-fill-mode:forwards; /* Safari 和 Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:2; -webkit-animation-fill-mode:forwards; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p> <div></div> </body> </html>出力結果:
css ビデオ チュートリアル)
以上がCSS3でアニメーション終了時に消えない効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。