ホームページ >ウェブフロントエンド >CSSチュートリアル >アニメーションフィルモードプロパティの使用方法
アニメーションフィルモードプロパティの使用方法
- 青灯夜游オリジナル
- 2019-02-01 11:27:313919ブラウズ
animation-fill-mode 属性は、アニメーションが再生されないとき (アニメーションが完了したとき、またはアニメーションに遅延があり再生が開始されないとき)、要素にスタイルを適用するために使用されます。アニメーション効果が表示されます。
#CSS3 アニメーションフィルモード プロパティ
関数:animation- fill-mode 属性は、アニメーション効果がアニメーションの再生前または再生後に表示されるかどうかを指定します。
注: デフォルトでは、CSS アニメーションは最初のキーフレームが再生されるまで要素に影響を与えず、最後のキーフレームが完了すると要素への影響を停止します。 anime-fill-mode プロパティはこの動作をオーバーライドします。
構文:
animation-fill-mode : none | forwards | backwards | both;none: デフォルトの動作を変更しません。 forwards: アニメーションが完了したら、最後のプロパティ値 (最後のキーフレームで定義されたもの) を保持します。 backwards:アニメーション遅延で指定された期間中、アニメーションが表示される前に、開始プロパティ値 (最初のキーフレームで定義) が適用されます。 both: 前方フィル モードと後方フィル モードの両方が適用されます。
注: Internet Explorer 9 以前のバージョンは、animation-fill-mode 属性をサポートしていません。
CSS3 アニメーションフィルモード属性の使用例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>
<div></div>
</body>
</html>レンダリング: 
以上がアニメーションフィルモードプロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。