【CSS】transformとanimationの違いを分かりやすく解説！！

こんにちは！ラクです。

この記事では、cssのtransformとanimationの違いを分かりやすく解説したいと思います！

transformとanimationの違いは？

transformとanimationの両方とも、要素を変形するためのプロパティです。

なので、本質的な役割は同じです。

結論を言ってしまえば、

transform･･･単純な変形しか指定できない。でも、簡単に書ける。
animation･･･複雑な変形が指定できる。でも、書くのが難しい。

こんな感じです！

と言ってもイメージしにくいと思うので、両方の特徴を紹介していきます。

transform：単純だけど使いやすい

こちらは、知っている人は多いと思います。

transformは、指定した要素に指定した動きを与えます。

言葉だけでは分かりにくいと思うので、サンプルを作ってみました！

今回は、カーソルが乗った時に動くようにしました。

<div>transform</div>

div {
  transition: 0.4s; /* 0.4秒かけて変形する */
}

/* ↓div要素にカーソルが乗った時 */
div:hover{
  transform: scale(1.3); /* div要素を1.3倍する */
}

こんな感じで、シンプルな動きが得意なのがtransformの特徴です！

animation：使いにくいけど複雑な動きができる

続いてanimationですが、こちらは動きに緩急をつけるのが得意です。

先ほどのシンプルな動きではなくより複雑で面白い動きを実装できます！

ですが、animationはコードの記述の仕方に癖があるます。

こちらも、言葉では分かりにくいので、サンプルを作りました！

<div>animation</div>

div {
  transition: 0.6s;
}

.div:hover {
  animation: aaa 0.6s 1; /* 左から、アニメーションの名前、時間、実行する回数 */
  transform: scale(1.3);　/* アニメーションが終わった時の最終地点 */
}

@keyframes aaa{
  0%{
    transform: scale(1); /* 開始点 */
  }
  70%{
    transform: scale(0.7); /* 動き出してから70％経った点 */
  }
  100%{
    transform: scale(1.3); /* 最終点 */
  }
}