CSSのアニメーション｜animationとtransition2つの使い分けをマスターしよう

:hoverの擬似classを使用してのアニメーションではtransitonを使いましたね。

transitionは直訳すると変遷、つまりプロパティの移り変わり方を指定するプロパティです。

a{
  background-color: #fff;
  color: #333;
  
  /* プロパティが遷移する時間を指定 */
  transition: color 0.5s, background-color 0.5s;
}

a:hover{
  background-color: #086ec9;
  color: #fff;
}

このようにプロパティ単位のシンプルな動き方をスムーズに遷移させることにtransitionは向いていますが、以下のような課題があります。

1. アニメーションを起こすにはキッカケが必要（例：ホバーやクリックなど）
2. 変化の状態が元に戻ってしまう（例：ホバーを解除したら元の状態に戻る）
3. 無限ループのアニメーションは作成できない
4. 複雑な変化には対応できない

これらを一挙に解決できるプロパティが、今回紹介するanimationプロパティです！

animationの書き方