cman.jp > WEBページ作成TOP > CSSリファレンス > 「アニメーションの再生前後のスタイル」
WEBページ作成
広告
animation-fill-mode 「アニメーション開始と終了時の状態指定」
「animation-fill-mode」は「animation」の開始時と終了時の状態を指定することができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | - | - |
広告
animation-fill-modeの指定方法
| プロパティ/設定値 | 開始待ち 「animation-delay」の指定時間 | 終了時 |
|---|---|---|
| animation-fill-mode : none | 「@keyframes」は適用されない | 「@keyframes」は適用されない |
| animation-fill-mode : backwards | 「@keyframes」の開始状態(*1) | 「@keyframes」は適用されない |
| animation-fill-mode : forwards | 「@keyframes」は適用されない | アニメーションの最後の状態(*2) |
| animation-fill-mode : both | 「@keyframes」の開始状態(*1) | アニメーションの最後の状態(*2) |
|
(*1)アニメーション開始待ち「animation-delay」が指定されている時の待ち時間に「@keyframes」の開始(0%,form)の状態が適用される (*2)アニメーション終了時の状態が維持される。「@keyframes」の終了状態(100%,to)ではない。 |
||
| デフォルト：「タグ毎のスタイル初期値」を参照 | ||
animation-fill-mode のサンプル
<style type="text/css">
.div1{
animation : sample_s1 6s ease 3s 1;
height : 50px;
margin : 5px 0;
color : #fff;
background: #666;
}
.m_none { animation-fill-mode : none; }
.m_backwards{ animation-fill-mode : backwards; }
.m_forwards { animation-fill-mode : forwards; }
.m_both { animation-fill-mode : both; }
@keyframes sample_s1 {
0% { width: 100px; background: blue; }
50% { width: 200px; background: red; }
100% { width: 250px; background: green;}
}
</style>
<!-- html -->
<div class="div1">-</div>
<div class="div1 m_none">none</div>
<div class="div1 m_backwards">backwards</div>
<div class="div1 m_forwards">forwards</div>
<div class="div1 m_both">both</div>
-
none
backwards
forwards
both
| 関連するCSS(STYLE) | |
|---|---|
| animation | アニメーションの設定 |
| animation-play-state | アニメーションの再生と一時停止 |
| keyframes | アニメーションの動きを指定 |
| backface-visibility | 裏面の表示 |
| perspective | 子要素の奥行きの指定 |
| perspective-origin | 子要素の奥行きのx軸・y軸方向の位置 |
| transition | トランジションの設定 |
| transition-delay | トランジションのディレイ |
| transition-duration | トランジションの再生時間 |
| transition-property | トランジション対象のCSSプロパティ |
| transition-timing-function | トランジションの速度 |
| animation | アニメーションの設定 |
| animation-delay | アニメーションのディレイ |
| animation-direction | アニメーションの方向 |
| animation-duration | アニメーションの再生時間 |
| animation-iteration-count | アニメーションの繰り返し |
| animation-name | アニメーションのキーフレーム名 |
| animation-timing-function | アニメーション速度 |
広告