CSS3でアニメーション終了時に消えない効果を実現する方法-フロントエンドQ&A-php.cn

CSS3でアニメーション終了時に消えない効果を実現する方法

WBOY

リリース： 2022-03-29 17:06:50

オリジナル

2968 人が閲覧しました

css3 では、「animation-fill-mode」属性を使用して、アニメーションが終了しても消えない効果を実現できます。この属性は、アニメーションが再生されていないときの要素のスタイルを指定できます。属性が forwards に設定されている場合、アニメーション効果は消えません。構文は「animation-fill-mode:forwards」です。

CSS3でアニメーション終了時に消えない効果を実現する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 でアニメーション終了後に消えない効果を実現する方法

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>

ログイン後にコピー

出力結果:

CSS3でアニメーション終了時に消えない効果を実現する方法