Newly available 安心して使用可能。主要ブラウザで広くサポートされている。
アニメーション Newly available

linear() easing function

cubic-bezier では表現できない複雑なイージングカーブを、複数のポイント指定で作成できる。バウンス・弾性・ステップ風のイージングをCSSだけで実現でき、JSライブラリへの依存を減らせる。標準のease・ease-in-outでは物足りない場面で威力を発揮する。

アニメーションイージング

概要

cubic-bezier では表現できない複雑なイージングカーブを、複数のポイント指定で作成できる。バウンス・弾性・ステップ風のイージングをCSSだけで実現でき、JSライブラリへの依存を減らせる。標準のease・ease-in-outでは物足りない場面で威力を発揮する。

対応ブラウザ

デスクトップ

Chrome 113+
Edge 113+
Safari 17.2+
Firefox 112+

モバイル

Chrome Android 113+
Safari iOS 17.2+
Firefox Android 112+

基本構文

CSS 
.bounce {
  animation: drop 1s linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191,
    0.25, 0.316, 0.391, 0.473, 0.563, 0.66, 0.766, 0.879,
    1, 0.879, 0.766, 0.66, 0.563, 0.473, 0.391, 0.316,
    0.25, 0.316, 0.391, 0.473, 0.563, 0.66, 0.766, 0.879, 1
  );
}

実務での使いどころ

  • バウンスアニメーション

    要素が落下して跳ね返るようなバウンスイージングをCSSだけで表現できる。

注意点

  • ポイント数が多いとCSSが冗長になるため、ジェネレーターツールの活用を推奨。

アクセシビリティ

  • 派手なバウンスアニメーションは前庭障害のあるユーザーに負担になる可能性がある。prefers-reduced-motionを考慮する。

参考リンク