少し前にお仕事で詰まった部分を少し自分のおさらい用に記事にしようと思います。
最近、結構CSSでアニメーションをつけることが多いのですが、私は持っている知識で代用出来る部分は代用してしまう癖があるため、知識がまったく無いものでなければ調べないという悪い癖が実はあります・・・。
なので、少し前にお仕事で詰まった際もアニメーション？positionで動く！よしこれでどんどんアニメーションをつけていくぞ！とサイトをどんどん構築していたのです・・・。

アニメーションの以外な罠　上司に言われて気付く

上司にこのサイトのアニメーションかくついていませんか？とある時指摘を受けました。
確かに・・・。
と思いました。でも原因が分からず、色々と調べていくうちにtransformを使ってアニメーションを付けようという記事に行きつきました。
もうどうしようもなく、とりあえずその記事の通りにtransformを使ってアニメーションを設定しなおしました。

奇跡的に綺麗に動く！　でも何故？

設定してみると今までの苦労が嘘かのようにするするとサイトのアニメーションがうまく動くではありませんか。
え？これだけで直っちゃうの？とは思いましたが、とりあえずなんで直ったのかも気になったので、そこから少し調べてみることに。

答えは単純。サイト負荷の問題でした。

まずは答えからいきます。positionはtransformと比べて読み込みが重い。
でも今までは特に問題無くpositionでも綺麗にアニメーション出来てたんだけどなあ・・・。そう思っていたのですが、よくよく思い返してみると、そのかくついていたサイトは全体的に読み込みが重めなサイトでした。そこに更に負荷をかけたからアニメーションがかくついたんだな。と納得しました。

X・Y軸だけじゃない実は他にも注意が必要

記事の中ではX・Y軸の話だけをしましたが、実は縦横のサイズ変更等のアニメーションもtransformを使った方がサイトに負担をかけずに綺麗にアニメーションさせる事ができるようです。
負担といえば、最近は結構重たいサイトが増えてきているような気がします。その分、端末のスペックも上がってきているので、気にしなくて大丈夫という方もいるかもしれませんが、サイトが軽いに越したことはないため、本日記事にしたtransformのアニメーション以外にもサイト読み込みの負担になっているもので削れるもの修正出来るものがあれば対応するといった事を心がけるとまた一つクリエイターとして成長出来るかもしれませんね。
例えば、ワードプレスを使う必要が無いサイトはワードプレスを使わないとか、そもそも別のCMSを使ってみるとか、jqueryも必要無ければ使わないとか・・・。