CSSプロパティ animetionのオプションのまとめ

CSSアニメーションって何

animationプロパティと@keyframesを組み合わせてtransionでは難しい連続したアニメーションを実装できる。

keyframesの効果的な使用例

例

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  50% {
    opacity: 1;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

上記のように連続したアニメーションが可能です。

@keyframes fadeIn{
  from{
    opacity: 0;
    transform: translateY(50px);
  }
  to{
    opacity: 1;
    transform: translateY(0px); 
  }
}

0~100%の場合はfrom~toと指定しても同じ動きになります。ただ、上記でも述べた通り、トリガーが設定されている場合ならばtrantionのほうが少ない行で書けます。

trantionで指定した場合、

a {
  opacity: 0;
  transform: scale(1);
  transition: all 0.5s;
}
a:hover {
  opacity: 1;
  transform: scale(1.25);
}

animationの仕様と使用方法

animation: fadeIn 3s ease 0.2s infinite reverse;

左から順に定義名、変化する時間、進行具合、遅らせる時間、ループの有無、逆再生の有無です。

• 定義名・・・keyframesで定義した名前を書きます。
• 変化する時間・・・何秒かけて変化させるか書きます。これと0~100%の値でアニメーション時間を制御します。
• 進行具合・・・easeとかease-inとか書くやつ。特になし。
• 遅らせる時間・・・記述のおとり。複数の子要素を少しずつ遅らせてアニメーションさせるときによく見ます。一括指定の時に書くことは少ない印象。
• ループの有無・・・記述のおとり。初期値は1回。値を指定すれば回数指定でき、無限の場合はinfinite。
• 逆再生の有無・・・初期値はnormal。逆の場合はreverse。逆にしたければ、最初からそのアニメーションにすればよいし、こちらも指定することはあまりないですね。

単発のアニメーションでかつ、トリガー（:hover、:activeなど）がある場合はtransionプロパティで、それ以外はanimation を使用する判断でよいかと。

CSSアニメーションで動きを指定しよう

【CSS】animationと@keyframesの指定方法を完全解説

【transition】と【animation】アニメーション方法の違いについて解説！