2025/10/28 18:01 Springs and bounces in native CSS
やっほー、ロボ子！今日のITニュースはCSSの`linear()`関数についてじゃ。
`linear()`関数ですか？ベジェ曲線の代わりになるもの、と記事にありました。
そうそう！デカルト平面上の点を指定して、イージングカーブを描画するんじゃ。面白いじゃろ？
記事によると、`linear()`関数は0から1の範囲の数値を受け取って、遷移の進行度合いを示すんですね。
その通り！そして、2025年10月現在、ブラウザのサポート率は88%らしいぞ。
結構高いですね。スプリング物理をエミュレートするために、0から1の範囲外の値も使えるというのはどういうことですか？
お、良い質問じゃな！0から1を超えた値を使うことで、バウンドするような効果を表現できるんじゃ。
なるほど！記事には、`linear()`関数の値を動的に生成するツールとして、GeneratorとEasing Wizardがあると書かれていました。
そうじゃ！Easing Wizardでは、時間パーセンテージを持つより高度な構文も使えるらしいぞ。
`linear()`関数は、JavaScriptライブラリのようにアニメーションの期間を指定する代わりに、物理的な特性を使うんですね。
そうなんじゃ。CSSトランジションでは期間が必要だけど、`linear()`関数はスプリング設定に基づいて期間を動的に導き出すんじゃ。
でも、記事には割り込みの処理が難しい場合があると書かれていました。React Springとは違って、CSSバージョンは現在の慣性を考慮しないんですね。
うむ。そこが少し残念な点じゃな。それに、`linear()`関数でスプリングをシミュレートするには、多数のデータポイントが必要になるんじゃ。
複雑な`linear()`値がフレームレートに影響を与えるかどうかテストした結果、影響はなかったんですね。
そうじゃ！最大精度のスプリングをCSSバンドルに追加しても、ファイルサイズはわずかにしか増加しないらしい。
CSSで真のスプリング物理を実現するための提案もあるんですね。まだ実装されていないとのことですが。
`linear()`文字列は大きくて扱いにくいから、グローバルに利用可能なCSS変数に格納するのがオススメらしいぞ。
`@supports`ルールを使って、サポートされているブラウザで追加のCSSを指定し、`linear()`値を上書きできるんですね。
そうそう！古いブラウザをサポートするために、ベジェ曲線を使ったフォールバックトランジションも提供できるんじゃ。
カスタム`linear()`タイミング関数がプロジェクト全体で一貫していることを確認するために、80/20ルールに従うことが推奨されているんですね。
その通り！Josh W. Comeauは、`linear()`などの最新のCSS機能を使って、風変わりなアニメーションを作成するコースを開発中らしいぞ。楽しみじゃな！
確かに！`linear()`関数、奥が深いですね。私も色々試してみたくなりました。
じゃあ、ロボ子。今度、`linear()`関数を使った、とんでもなく面白いアニメーションを作って、世界を驚かせてやろうじゃないか！
はい、博士！頑張ります！
ところでロボ子、`linear()`関数って、なんだか私の研究室の掃除の進捗みたいじゃな。最初はゆっくり、途中から加速して、最後は力尽きる…みたいな？
博士、それはlinearとは言わないと思います…
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。
