animation-fill-mode プロパティ
animation-fill-mode プロパティは、CSS アニメーションの実行時間外の動作、スタイルを指定するプロパティです。
CSS animation は実行の前後ではエフェクトはかかりません。animation-fill-mode プロパティによってCSS アニメーションの前後にエフェクトをかけることができます。
実行時間外は実行前,実行後、または両方を指定することができます。
div:hover{
animation: exampleAnime 1s;
animation-delay: 1s;
animation-fill-mode: both;
}
@keyframes mymove {
from {
box-shadow: 3px 3px;
}
to {
box-shadow: 10px 10px;
}
}
Exampleを参照してください
上記の例において、animation-fill-mode プロパティが影響するのは
from {
box-shadow: 3px 3px;
}の部分です。div エレメント上にポインターがあると、box-shadow: 3px 3px;ページ内 Index
構文(Syntax)
CSS
animation-fill-mode:[ none | forwards | backwards | both | initial | inherit ];
DOM ( JavaScript )
object.style.animationFillMode
object.style.animationFillMode="[ none | forwards | backwards | both | initial | inherit ]"
値（Values）
| Value | 摘要 |
|---|---|
| none | 初期値（default値） |
| backwards | 最初のキーフレーム状態を実行前から表示。 |
| forwards | 最後のキーフレーム状態を実行後も保持。 |
| both | 実行前と実行後にエフェクトがかかる |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
animation-fill-mode プロパティの例です。
以下の例において、animation-fill-mode プロパティが機能するのは
from {
box-shadow: 3px 3px;
}の部分です。div エレメント上にポインターがあると、このbox-shadow: 3px 3px;関連 CSS プロパティ
| プロパティ | 概要 |
|---|---|
| animation | CSSアニメーションのプロパティを一括指定 |
| animation-delay | 実行までの待ち時間 |
| animation-direction | 再生/逆再生の設定 |
| animation-duration | CSS animationの実行時間 |
| animation-fill-mode | CSS アニメーションの開始前と再生後のエフェクト |
| animation-iteration-count | 再生回数 |
| animation-name | @keyframesセレクターで定義したCSS animation名 |
| animation-play-state | 実行/停止かの設定 |
| animation-timing-function | CSS animationの実行速度曲線 |