linear() easing function
linear() は CSS 関数で、点の間を均一の進行する遷移曲線を作成します。 イージング関数 (<easing-function>) として、補間が最初から最後まで一定の速度で起こる遷移を作成します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 113 | 113 | 112 | 17.2 | 113 | 17.2 | |
基本構文
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を考慮する。