CSSアニメーションで終了状態を継続させる方法

CSSアニメーションを使って何か動きをつけようとしたとき、アニメーション後の状態をキープしたい時の備忘録です

アニメーション後に元に戻らないようにする

「アニメーション後に元に戻ってしまう」状態の例がこちら▼

青色の円を青→紫に色を変えるようにしています

色はいい感じに変わっていきますが、紫になった直後に青色に戻ってしまいます…

CSSのサンプルはこちら▼

/**
 * keyframes
 */
@keyframes circle {
  0% {
    background-color: #707AB1;
  }
  100% {
    background-color: #52B1DD;
  }
}

. circle-animation {
  background-color: #707AB1;
  animation: circle 3s ease 1s;
}

これを紫に変化したままキープさせたい時にはanimation-fill-mode: forwardsを指定します

. circle-animation {
  animation: circle 3s ease 1s;
  animation-fill-mode: forwards;
}

これでアニメーション完了後の状態をキープ出来るようになりました！

ちなみに、開始状態（アニメーションの0%の状態）をアニメーション開始前からキープする場合はanimation-fill-mode: backwardsを指定します。

開始状態・終了状態の両方をキープしたい場合はanimation-fill-mode: bothを指定すればOKです。

Animate.cssなどのライブラリを使ってアニメーションを付けたことはあるけど、いざ自力で作ろうと思ったらなんかうまくいかない時などに確認してみてください…

Animate.cssではanimation-fill-mode: bothが指定されていましたね。