【CSS】アニメーションの前後の状態を指定するanimation-fill-mode

こばゆた

今までのアニメーションはこんな感じでした

カーソルを乗せてください

box

こばゆた

アニメーションが終わった後に開始位置に戻ってしまうのが嫌な場合もありますよね

こばゆた

そんな時に使うのがanimation-fill-modeプロパティです

animation-fill-modeをつかうと…

カーソルを乗せてください

box

チャッピー

そのままになっている！

こばゆた

そんなanimation-fill-modeプロパティの使い方や他にどう使うかを今回見ていきます

こばゆた

また記事の都合上こちらの記事から順番にみてもらうと初めて学ぶ方もわかりやすいかと思います

今回の内容

1.animation-fill-mode
2.まとめ

1.animation-fill-mode

最初の例では「アニメーション終わりをそのままの状態にするため」にと説明しましたが、もう少し付け加えるとanimation-fill-modeプロパティはアニメーション前、後の状態を指定できるプロパティです。

こばゆた

でも主にアニメーション後に状態を変えたくない場合に使用します。

セレクター{
  animation-fill-mode: 値;
}

アニメーション後に要素を固定したい場合は値を”forwards”としてやります。

.box{
  animation-fill-mode: forwards; /*再生後はその位置に留まる*/
}

ボタンをクリックしてください

box

on/off

/*keyframesの設定*/
@keyframes translate{
  100%{
    transform: translate(230px); 
    border-radius: 50%;
  }
}

/*アニメーションの設定*/
.box{
  animation-name: translate; /*keyframesの名前が"translate"*/
  animation-duration: 2s; /*2秒間かけてアニメーションする*/
  animation-fill-mode: forwards; /*再生後はその位置に留まる*/
}

こばゆた

また他にも値がありますので以下にまとめました

ボタンにカーソルを乗せてください

none

forwards

backwards

both

乗せる

  <div class="boxA signal">none</div>
  <div class="boxB signal">forwards</div>
  <div class="boxC signal">backwards</div>
  <div class="boxD signal">both</div>

/*keyframesの設定*/
@keyframes signal{
  0%{
    background-color: #00B06B;
    color: #fff;
  }
  60%{
    background-color: #F2E700;
    color: #000;
  }
  100%{
    background-color: #bc302c;
    color: #fff;
  }
}

/*アニメーションの設定*/
.signal{
  animation-name: signal; /*keyframesの名前が"signal"*/
  animation-duration: 3s; /*3秒間かけてアニメーションする*/
  animation-timing-function: linear; /*アニメーションが"linear"で動く*/
}

.boxA{
  animation-fill-mode: none;
}

.boxB{
  animation-fill-mode: forwards;
}

.boxC{
  animation-fill-mode: backwards;
}

.boxD{
  animation-fill-mode: both;
}

見る限り値を”forwards”か”both”にするとアニメーションした際に最初の状態に戻ることなくそのままの状態でいてくれます。

チャッピー

じゃあ”forwards”と”both”の違いって何なの？

こばゆた

animation-delayプロパティを使った時に違いがでるんだ

次の例にはanimation-delayプロパティをそれぞれ付け加えたよ

開始の時に違いが出るから注意してやってみてね

ボタンにカーソルを乗せてください

none

forwards

backwards

both

乗せる

/*keyframesの設定*/
@keyframes signal{
  0%{
    background-color: #00B06B;
    color: #fff;
  }
  60%{
    background-color: #F2E700;
    color: #000;
  }
  100%{
    background-color: #bc302c;
    color: #fff;
  }
}

/*アニメーションの設定*/
.signal2{
  animation-name: signal; /*keyframesの名前が"signal2"*/
  animation-duration: 3s; /*3秒間かけてアニメーションする*/
  animation-timing-function: linear; /*アニメーションが"linear"で動く*/
  animation-delay: 1s; /*1秒後にアニメーションを開始する*/
}

.boxA{
  animation-fill-mode: none;
}
/*アニメーション開始前にkeyframesの初期値が適用されず、終了後にも適用されない(初期値)*/


.boxB{
  animation-fill-mode: forwards;
}
/*アニメーション開始前にkeyframesの初期値が適用されず、アニメーション終了後はスタイルを保ったままにする*/


.boxC{
  animation-fill-mode: backwards;
}
/*アニメーション開始前にkeyframesの初期値が適用されるが、終了後には適用されない*/


.boxD{
  animation-fill-mode: both;
}
/*アニメーション開始前にkeyframesの初期値が適用され、アニメーション終了後はスタイルを保ったままにする*/

チャッピー

“backwards”と”both”はボタンに乗った瞬間にスタイルが変わってる

きなこ

keyframesの初期値が適用されるってそういうことなんだ

逆に終了時にもkeyframesが適用されているからアニメーション終了後もそのままの位置にあるってことなんだね

こばゆた

そういうこと！

文章だけだとわかりづらいので表にまとめました

キーワード	開始時(animation-delayが指定されている時)	終了時
none	keyframesの初期値が適用されない	keyframesが適用されない(初期値)
forwards	keyframesの初期値が適用されない	keyframesが適用される
backwards	keyframesの初期値が適用される	keyframesが適用されない
both	keyframesの初期値が適用される	keyframesが適用される

2.まとめ

animation-fill-mode まとめ

アニメーション前、後の状態を指定できるプロパティ
animation-delayプロパティを設定するかどうかで始まり方が変わる

セレクター{
  animation-fill-mode: 値;
}

キーワード	開始時(animation-delayが指定されている時)	終了時
none(初期値)	keyframesの初期値が適用されない	keyframesが適用されない
forwards	keyframesの初期値が適用されない	keyframesが適用される
backwards	keyframesの初期値が適用される	keyframesが適用されない
both	keyframesの初期値が適用される	keyframesが適用される