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

こんにちは!ラクです。

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

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); /* 最終点 */
  }
}

このように、animationを使えば一旦小さくなって、また大きくなるみたいな動きができます。

コードをみて貰えば分かるとおりkeyframesという物を使ってアニメーションを作っており、動き出してから終わるまでの時間(今回は0.6秒)でその間での動きを指定しています。

keyframesについては、少しややこしいのでここでは解説しませんが、animationとセットで使うと思っておけば大丈夫です!

まとめ

もう一度transformとanimationまとめると、

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

です。

両者の違いはわかったでしょうか?

皆さんもこの二つを使い分けて、リッチな動きを実装してみてください!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です