CSSのKeyframeアニメーションが正常に動作しなかった原因が凡ミスだった話

日々、何かしらの開発をしている、プログラミング生活まっしぐらの、ユゲタです。 先日、とある人と話している時に、「プログラムばかりしていて、信じられない」という事を言われました。 その人は、プログラミング学習をし始めたばかりで、毎日プログラミングの事ばかり考えていると頭がおかしくなってしまうのだそうです。 ここで改めて、「夢中に勝る努力なし」という孔子の言葉を思い出しました。 難しい事をするのが嫌ならやめればいいし、プログラミング学習は仕事でしているのでなければ、無理してする必要は全くありません。 趣味でプログラミングを持っているという人は、休日でもプログラミングをしていても何の不思議もないけど、このセリフを言う人って、 自分の意見を他人に押し付けたがる傾向があるのではないか？と、その人の人格を垣間見た感じがして、いい気付きに繋がりましたね。

CSSアニメーションをjsでコントロールしていた時の話

とあるシステム構築をしている時に、CSSのkeyframeアニメーションを設定をもとに自動で生成する処理を作ったんですが、何故か実行すると動かない・・・ というか、動くときと動かない時がある。 なんかこの不規則性がキモチワルい。 何かしらの読み込み問題が発生しているのかと思って調べてみるが、何がおかしいのかわからない・・・ 複数のkeyframeアニメーションが発生するので、animation-nameには、UUIDをセットして、重複を防止するようにしていたのですが、 そのUUIDがちょっと眺めの文字列だったので、もしかしたら文字の長さが仕様に引っかかっているのかと思って、単純な"test"みたいな文字列にすると正常に動く。 この時のanimation-nameは次のような感じ

@keyframes 068296F5-4B9B-4EFD-84E5-558860CE5F48_walk_5FA197673C8E4A85835F69CEBF6079FC{...}

どうやらこのanimation-nameが原因で動かない事は間違いないらしいが、過去にもっと長い文字列で書いたことを思い出し、 そもそも何かが間違っているのではないか？と考えて調べてみると、どうやら、nameの開始文字列は英文字じゃないといけないらしい。 UUIDは、英数字が不規則に並んでしまうので、数字が先頭になる場合があったんですね。 不規則だったのは、先頭が英文字の時は正常に動作して、数字だった場合に動作しないという事だったようです。

解決方法

UUIDの生成に応じて処理をするのが嫌なんですが、もっと簡単に解決するには、「プレフィックス」を使うということです。 今回は"anim-"という文字列をanimation-nameの手前において、必ず英文字から始まるようにすることで解決することができました。 仕様を知らずにいると、無駄な時間を過ごしてしまうという体験をまたもやしてしまった。 こういうのって、定期的に繰り返しちゃうんですよね。 でも、毎回リファレンスをきっちり読んでばかりもいられないから、頭に叩き込むしか無いのか？

仕様確認

とりあえず、リファレンスサイトでanimation-nameの仕様を確認しておくことにします。 https://developer.mozilla.org/ja/docs/Web/CSS/animation-name こちらのページにちゃんと書かれていました。

アニメーションを識別する名前です。 識別子は大文字小文字の区別がない英文字 a から z、 数字 0 から 9、 アンダースコア (_)、 ダッシュ (-) から成ります。 最初のダッシュ以外の文字は英文字でなければなりません。 また、二重ダッシュは識別子の先頭では禁止されています。 さらに、識別子は none, unset, initial, inherit であってはなりません。

いや〜お恥ずかしい、バッチリここに注意されていましたね。 とにかく、こういう積み重ねって、非常に重要。 やはりプログラミングって時間がかかってしまうものなんですね。 そう考えるとますますワクワクしてくるユゲタであった・・・