自分なりのCSSアニメーションとの向き合い方

Zenn初投稿になります。

死ぬほど文章書くの下手なので、日本語おかしいところめちゃくちゃあると思いますが、暖かい目で見ていただけるとありがたいです…

昨今だと「いや、AI使えよ」って話かもしれませんが、今回の内容は自分の心境なども話したいこともあり、自分の言葉で話したいので自分で書く方向にしました。また、本記事で書く内容は自分の考えであり、みんながこう考える・こうするすべきというものではなく、1人の人間の考えとして捉えてもらえるとありがたいです。

僕とCSSアニメーション

まず、自分について少しだけ説明させてください。
僕はyui540と申します。職業を明確にするのが、若干難しいのですが、
状況に応じて、フロントエンドエンジニアとして働くこともあれば、Webデザイナー・モーションデザイナーのような役割を担うこともありますが、自分の中のベースはフロントエンドエンジニアという気持ちでいます。2018年頃からCSSアニメーションを触り始め、現在至るまで趣味でも仕事でもCSSアニメーションで遊んでいます。

触ってる歴はそれなりに長いですが、CSS/CSSアニメーションに詳しくはないです。
ですが、CSSアニメーションで人一倍遊んできたという自信だけはあります。

あなたはCSSアニメーションをどう捉える？

突然ですが、みなさんはCSSアニメーションをどう捉えているでしょうか？（CSSのいち機能？Webフロントの技術？）
自分は他の方（特にエンジニア圏）とは、ちょっと捉え方が違っていて、CSSアニメーションをAfterEffectsのようなモーショングラフィックソフトと捉えています（主な操作手段がGUIベースかコードベースかが違うだけという考え）
なので、自分が CSSアニメーションをやる時の意識配分は「技術」ではなく、「アニメーションそのもの」です。

というのも、僕がアニメーション作る技術的手段は基本はCSSアニメーション一本でいき、他のアニメーション周りの技術の勉強を少し控える以上、技術ではなく、アニメーションを考える・作る力（映像的というかキーフレームベースでの）を磨かないといけないからです。
CSSアニメーションの特性上、ジェネラティブアート方面ではなく、キーフレームベースでアニメーションを作る以上はここは避けれないし、むしろより頑張らないといけないと感じたからになります。
また、CSSアニメーションはプロパティで表現できること的にも、パーフォーマンスを考慮したという意味でも、出来ることは限られています。
だからこそ、本職のモーションデザイナーには追いつけなくとも、「この人だったらモーションデザイン任せてもいいかな」ぐらいに思ってもらえるぐらいにはならないといけないため、意識配分は「アニメーションそのもの」にするためにCSSアニメーションを「技術」という風にはあまり捉えないようにしています。

CSSアニメーションの勉強法

よく「CSSアニメーションをどうやって勉強しました？」「本はどういうのを買いました？」といった質問をされるのですが、結論からいうと、自分はCSSアニメーションをやるにあたって本などは買っていませんし、勉強といった勉強はしていないです（ただただ気が済むまで触って遊んでた）
なので、僕からアドバイスできることがあるとすれば、勉強という風に気を張って始めるのではなく、「遊ぶ」ぐらいの気持ちでいいと思います（自分がCSSアニメーションで遊ぶという表現をするのはそういう意図）
とはいえ、これで後は頑張ってねって感じで終わってしまうと困ると思いますので、自分はこういう風にやってきたをお話しできればと思います。

CSSアニメーションでアニメーションを作る場合は、transform（translate, rorate, scale, skew等）とopacityでできるだけ作ること意識した方がいいです。
これはGPUアクセラレーションが適用させるという意図もありますが、枯れたプロパティなので、どのデバイスでもある程度描画が安定するという意図が大きいです。
アニメーション作成の経験がない方ですと、キツく感じるかもしれませんが、これらはモーショングラフィックスにおける本当に基礎的な要素でむしろこれらだけである程度、アニメーションのレパートリーを出せないと後々に困ります。

始め方としては、まず最初はtranslateだけなど使うプロパティを縛ってアニメーションを作ってみて、ある程度慣れてきたら、自分の中でテーマを決めてアニメーションを作ってみると良いです（線をモチーフなど）
ここで重要なのは特定縛りを設けて、自分の中のアイデアを出し尽くすことです。
自分の中のアイデアが枯渇してきた段階で、
映像作品やWebサイトやゲームなどの良質な作品から見て学ぶ・真似る（外に公開する時は丸パクはダメですよ！）
あとはドア開けた時とか、日常生活の動きから学ぶも多いです（個人的には精度高く作業をこなす職人さんの動画とか見るの好き）

これらを続けていけば、少なくとも自分程度の練度であれば、誰でもなることができると思います（さらに上達は僕にはわからない）

とここまで偉そうに語りましたが、自分は理詰めするのが苦手なので結構気の赴くまま作っているので、あまり気を張らなくても大丈夫ですよというのが一番伝えたいことです。

最新・かっこいい手法・手段に囚われすぎない

CSSという「技術」を扱う以上、最新のかっこいい書き方にこだわりたくなるのはものすごくわかるのですが、そこに囚われすぎると本来の方向性を見落としてしまうこともあるので、気をつけたいところであります（かといって、新しいものに疎すぎるというのも問題ではありますが）
最新のプロパティやアットルールなどを取り入れていくことはすごく大事ですが、CSSアニメーションは「アニメーション」という要素を含んでる以上、それに捉われすぎると本来の「アニメーションを作る」という目的を見落としてしまいがちです。
また、それが仕事の場合、実際は色んな端末で安定的に描画させるためにレガシーなプロパティや所謂ダサい書き方をしないといけないことがあるというのもあるためです。
View Transitionやanimation-timelineなどをプログレッシブエンハンスメント的に使うのもすごく良いですが、仕事だと「この端末だと動かないんだけど」というように中途半端に対応してしまうがために、ちゃんと対応しようとすると大変になるということもあります。
なので、最新・かっこいい手法・手段に目を向けて拘るのはすごく良いことなのですが、そこに意識配分を持っていかれすぎると本来の目的の「アニメーションを作る」を忘れてしまうので、ある程度自分の中での意識配分を考えるといいと思います。

当たり前を楽しんで

CSSアニメーションに慣れてくると、CSSを書くとアニメーションが動くのは当たり前に感じてしまって、楽しさを感じなくなるかもしれません。

そうなったら、思い出してほしいです。
作ったCSSアニメーションは、色んなデバイスでリアルタイムにレンダリングされているというすごさを。インタラクションに組み込んだ場合は、触った反応するアニメーションのワクワク感を。

なにより、数十行・数百行、文字を書いただけでアニメーションができていく楽しさを楽しんでほしいです。

僕とCSSアニメーションのこれから

最後になりますが、これからの僕のCSSアニメーションとの向き合い方についてお話させていただきます。

直近は、CSSアニメーションを起点に、他の技術などに少しずつ視野を広げてみようと思っています。
前まではブラウザで描画されてるとか、CSSアニメーションの書き味を完全再現してくれないとダメみたいな厄介な気持ちがあったのですが、今は別にブラウザで描画じゃなくてもいいし、書き味もそれっぽくあればいいやという考えに変わりました（React Native Reanimatedを使い始めたのもこれが理由です）
というのも、今までCSSアニメーションで遊んできて培った、アニメーション作る力やコードベースでの考え方は「死なない」という風に感じたからです。

なぜこういう考えになったかというと、大AI時代真っ只中の今、少なくとも自分よりはコーディングにしろアニメーションにしろデザインにしろ、少なくとも自分よりはAIの方がうまくて、自分の変な拘りやプライドはとても重い足枷になると感じたからです。
そして、世の中は僕の事情なんか知ったこっちゃないといったように、加速し続けるということも。

今、僕は29歳で今年の11/9に30歳になりますが、30歳目の前にして、ようやく心の折り合いがつき始めたという感じで、心境としては付きものが落ちたという感じです。

これから、人生どうなるかわかりませんが、意味がある・ない関係なく、自分で作るということを続けていけたらと思っています。