animation-timelineのcssが効かないときの対処法

CSSだけでスクロールアニメーションが作れる！という記事を見つけて、トライしてみましたが、animation-timelineのcssがあたらず、うまくできませんでした。
その時の対処法について、簡単に紹介します。

CSSだけでスクロールアニメーションが作れる！という記事

CSSだけでスクロールアニメーションが作れるなんてめっちゃ便利やん！ってことで、前述をトライ(コピペ）してみたのですが、お手本通りに動かない。なんでや！、なんでやー！と調べていたところ、animation-timelineのcssが当たっていないことが判明。横線が入っとる。

困ったので、VSコードさんに確認したところ

⚠️ Property is experimental. Be cautious when using it.️

Specifies the names of one or more @scroll-timeline at-rules to describe the element’s scroll animations.

(Firefox 97)

Syntax: <single-animation-timeline>#

とのことでした。
google翻訳先生によると、『このプロパティは実験的なものです。ご使用の際はご注意ください‼️』
とのことで、そんなことで横線入れちゃうか？と思いつつ…知らんけど

悩んだ結果、html内に <style></style>の中に記述したら、無事に反映されました。

めでたし。めでたし…?

今のところChrome 115のみ対応とのことですので、まだまだjsさんで頑張らんといかんですかね。