ど〜も〜、絶賛ダイエット中のたかの人です！
そんな事言いながら、先日串揚げビュッフェに参戦し、この一週間分の努力をチャラにしてきました(´◉◞⊖◟◉`)bﾟ
さて、今回はフロントエンジニアらしくちょっとCSSアニメーションのお話でもしましょうかね！
では、本題に入りましょう！
例えば、皆さんは画面呼び込み後にCSSアニメーションで要素をアニメーションさせる時どうしますか？
私は、このように書いていました。
まぁ、何の工夫も無い書き方ですね（笑）
positionを使用した普通の書き方です。
デフォルト位置をpositionで指定し、@keyframesで位置をコントロールするものです。
欠点らしい欠点は無いのですが、強いてあげるとしたら、、、
position: absolute;とmargin: auto;を用いて中央化した時のアニメーション量がコントロールしづらい- 親要素に基準となる
position: relative;などの記述が必要
ぐらいですかね？
そして、最近のよく使う方法がこちら
動きはほとんど同じかと思います。
前回と異なる点は、要素のアニメーションにtransformを使用している点です！
まずは、通常通りコーデイングし、デフォルト位置を決めます。
この時デフォルトコーディングは何を使用してもOK！
positionを使って位置を指定しても、flexを使用しても問題なし！
そして、アニメーションをtransformを使って行います。
ちなみにX軸方法にも動かしたい場合はこのように行います。
どうです？いい感じじゃ無いですか？
そして、優れている点として、アニメーションをCPUではなくGPUで行なっている点です。
通常、２Dアニメーションに関してはCPUを使用しているのですが、３DになるとGPUを使用し始めます。
今回、Z軸はアニメーションでは使用していないのですが、translate3d(0, 0, 0)と記述すると、Z軸も指定されたと認識され、GPUを使用したアニメーションになります。
基本的にはCPUよりもGPUの方がコア数が多くアニメーション表現に向いていると言われています。
詳しい違いやメリデメは各自ググってみてください（笑）
いや〜、久々にまともな記事を書いてしまった。
ひとまず、一杯やりますかね🍺
以上、たかの人がお送りしました！
