linear() でバネ（スプリング）イージングを CSS だけで書く

どんな時に使う？

トースト通知・モーダル・ボタンの出現などで、cubic-bezier では作れない「行き過ぎて戻る×数回」の弾む動きを JS アニメーションライブラリなしで実現したいとき。

コード

:root {
  /* 値が 1 を超えて戻る＝オーバーシュート（弾み） */
  --spring: linear(
    0, 0.034 2.5%, 0.142 5.4%, 0.283 8.1%, 0.72 15.6%,
    0.932 20.1%, 1.069 24.4%, 1.143 28.8%, 1.162 32.2%,
    1.155 36.1%, 1.018 52%, 0.978 61%, 1
  );
}

.toast {
  transition: translate 0.6s var(--spring);
}

• 点の値は手書きせず、「linear() easing generator」系のツールでバネのパラメータから生成するのが実用的。

注意点・対応状況

• linear() は主要ブラウザで対応済み。
• バネらしさは duration にも依存するので、値を生成したツールの推奨 duration に合わせる。
• prefers-reduced-motion: reduce の時は通常のイージングに切り替える配慮を。

出典

• @sanyampunia · 2026-10-09