2026年、静的HTML向けCSS linear() イージング：キーフレーム・トランジションとSafari実機リハーサル

古いブログからコピーした cubic-bezier 四つ組を貼り続けると、Chrome ではまだマシでも Safari では「引っ付く」印象になりがちです。linear() は進捗ストップを百分比で並べ、animation-timing-function と transition-timing-function に多段の減速曲線を直接埋め込めます。2026年の静的HTMLではバンドルを増やさずに表現力を上げたい一方、スクロールドリブンの時間軸、prefers-reduced-motion、WebKit の合成スケジューラと整合させないと体験が壊れます。イージングはアクセシビリティの一部であり、数式が正しくても酔いを生むなら意味がありません。

すでに公開している スクロールドリブンアニメーションと 固定ヘッダーと scroll-padding を合わせ読みすると、スクロール域とナビ高さのズレを抑えられます。

構文とストップ間隔

各ストップは「出力進捗＋入力百分比」のペアです。百分比が重なると角ばり、滑らかな ease-out には少なくとも三つの内側ストップが欲しくなります。運用では合計五〜九個に抑え、DevTools のグラフとデザインレビューが追える幅にします。

.hero-card {
  transition: transform 420ms
    linear(0, 0.12 8%, 0.32 24%, 0.87 68%, 1);
}

最後のストップが入力 100% で 1 に届いているか必ず確認してください。早すぎる頭打ちは最終ピクセルが瞬間移動して見えます。

cubic-bezier との使い分け

ニーズ	cubic-bezier	linear()	メモ
単純なフェード	最適	過剰	古典曲線で十分。
マーケ用の多段バウンス	不向き	自然	ストップでバウンスを明示。
スクロール同期	硬い	柔軟	入力軸をスクロール進捗に合わせる。

スクロール時間軸との結合

animation-timeline が名前付きスクロールを参照する場合、イージングの入力は時刻ではなくスクロール進捗です。中盤の傾きが急だと「スクロール速度＋曲線」の二重加速に感じられます。スクロール域が 400px 未満のときは中盤を弱めるのが安全です。

動きを弱める設定

@media (prefers-reduced-motion: reduce) では透明度系を 120ms 前後へ、変形は linear(0,1) 級のほぼ即時に寄せます。OS 設定だけでなく Safari の低電力モードでもフレームが間引かれるため、きらめきがバグに見えないか別途確認します。

@supports とフォールバック

先に cubic-bezier を置き、機能検出で上書きします。

@supports (animation-timing-function: linear(0, 1)) {
  .hero-card { animation-timing-function: linear(0, 0.2 15%, 1); }
}

圧縮ツールが並び替えないよう、宣言順を固定してください。

Safari チェックリスト

1. 可能なら 120fps で録画し、微小なスタッタを見る。
2. macOS の「視差効果を減らす」をオンにしてキャッシュなし再読込。
3. ノートの低電力モードで同じページを再生。
4. Technology Preview と安定版の合成挙動を比較。

合成レイヤーと jank

transform と opacity は合成に乗りやすい一方、filter のブラーを大量に掛けると旧 GPU でメインスレッドに落ちます。同時ブラーは二要素まで、開始を 40ms ずらすのが現実的な折衷です。

デザインから linear() へ

Figma のベジェではなく、0–100% 時間を横軸、イージング出力を縦軸にした正規化グラフを共有してください。「ブランドの跳ね」と「着地」をアンカーに中間ストップを追加し、最悪幅でも誤差が 1 CSS px 未満になるまで調整します。承認済み文字列は README に日付付きで固定し、整形コミットで曲線が変わらないようにします。

年一回のモーション監査では、旧録画と新サイトを並べ、フォントや行高の差分が体感速度に与える影響も見ます。

ブレークポイントとコンテナクエリ

1440px でシャープに見える曲線が 390px では重く感じるのは、同じ百分比でも移動ピクセルが少ないためです。--ease-hero-wide / --ease-hero-narrow をコンテナクエリで切り替え、しきい値はおよそ 720px 付近が扱いやすいです。

will-change の節度

will-change: transform を乱用するとタイルメモリを食いつぶします。ビューポート同時は三要素まで、animationend で外す運用を徹底してください。

低データモード

iOS の低データモードでは軽い動きは欲しいが大きな LCP 動画クロスフェードは避けたい、という需要があります。第三のトークンセットで距離とブラーを削り、linear() の形は保ったまま出力だけ縮める方法が現場で扱いやすいです。

FAQ

linear() は cubic-bezier の置き換え？

いいえ。単純ケースは従来どおり cubic-bezier が主役です。

スクロールドリブンと併用できる？

可能ですが域を制限し合成挙動を必ず確認してください。

prefers-reduced-motion は？

時間短縮か空間移動の撤去が基本です。

ストップ数の目安は？

五〜九個を維持してください。

イージングの合否はディスプレイパイプライン依存が強く、Linux ヘッドレスのスクショだけでは Safari の体感と一致しません。Apple Silicon の Mac mini をクラウドで借り、約 16.9 USドル/日 から本番に近いフレーム間隔と P3 ガンマを再現するのが確実です。ローンチ週だけ常時オンにし、承認後に停止すれば床下に常設機を置くより遥かに柔軟です。

複数クライアントを持つ代理店では、プロファイルを分けてフォントキャッシュやプレビューポートの汚染を避けられます。