属性名 | animation-fill-mode |
---|---|
値 | <single-animation-fill-mode> [, <single-animation-fill-mode> ]* |
値の詳細 | <single-animation-fill-mode> = none | forwards | backwards | both |
初期値 | none |
適用可能要素 | すべての要素 (::before, ::after を含む) |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10 | 5(-moz) 16 | 4(-webkit) 43 | 15(-webkit) 30 | 4(-webkit) 9 |
アニメーション開始時、終了時のスタイルの適用ルールを指定します。アニメーションに関する概要は animation を参照してください。
値 | 説明 |
---|---|
none | 開始時、終了時にはアニメーションスタイルは適用されません。 |
forwards | 終了時に、アニメーション終了時のスタイルを適用したままにします。 |
backwards | 開始時に、アニメーション開始時のスタイルを適用します。animation-delay が指定された場合に、遅延時間の間、開始時のスタイルが適用されます。 |
both | 開始時には開始時のスタイルが、終了時には終了時のスタイルが適用されます。 |
@keyframes myframe { from { color: #66f; font-size: 20pt; } to { color: #f66; font-size: 24pt; } } .test { position: absolute; animation-name: myframe; animation-duration: 0.5s; animation-timing-function: ease-in; animation-delay: 2s; animation-iteration-count: 5; animation-direction: alternate; animation-fill-mode: both; }
<div class="test">A</div>