このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<easing-function>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
<easing-function> はCSS のデータ型で、値が変化する割合を記述する数学的な関数を表します。
この 2 つの値の間の遷移は様々な形で適用される可能性があります。アニメーション中に値が変化する速さを記述するために使用されることがあります。これにより、この間、アニメーションの速度を変化させることができます。イージング関数は、CSS のtransition およびanimation プロパティで指定することができます。
構文
/* キーワードによる線形イージング関数 */linear /* linear(0, 1) *//* カスタム線形イージング関数 */linear(0, 0.25, 1)linear(0, 0.25 75%, 1)/* キーワード 3 次ベジェイージング関数 */ease /* cubic-bezier(0.25, 0.1, 0.25, 1) */ease-in /* cubic-bezier(0.42, 0, 1, 1) */ease-out /* cubic-bezier(0, 0, 0.58, 1) */ease-in-out /* cubic-bezier(0.42, 0, 0.58, 1) *//* カスタム 3 次ベジェイージング関数 */cubic-bezier(0.25, 0.1, 0.25, 1)/* キーワード段階イージング関数 */step-start /* steps(1, jump-start) */step-end /* steps(1, jump-end) *//* カスタム段階イージング関数 */steps(4, end)steps(10, jump-both)値
<easing-function> は以下の型のうちのいずれかです。
<linear-easing-function>一定の速度で進行する遷移を作成します。この関数は、次のいずれかを使用して指定することができます。
linear一定の補間率で、期間を通して進行率に変化のないものを指定します（つまり、加速や減速はありません）。このキーワード値は
linear(0, 1)と同等です。これはcubic-bezier(0, 0, 1, 1)と表すこともできます。
メモ:
linearキーワードは常にlinear(0, 1)として解釈されます。ここで関数linear(0, 1)はlinear(0 0%, 1 100%)と解釈されます。linear()複数の進行の点を
<number>値で定義し、オプションの<percentage>値でそのタイミングを制御します。
<cubic-bezier-easing-function>変化を可変の割合で行うスムーズな繊維を作成します。この関数は次のいずれかで指定することができます。
easeイージング関数
cubic-bezier(0.25, 0.1, 0.25, 1)を表します。これは補間がゆっくり始まり、急激に加速し、終わりに向かって徐々に遅くなることを示します。これはease-in-outと似ていますが、始めのうちはより急激に加速されます。ease-inイージング関数
cubic-bezier(0.42, 0, 1, 1)を表します。これは補間がゆっくり始まり、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。ease-outイージング関数
cubic-bezier(0, 0, 0.58, 1)を表します。補間が急速に始まり、最終状態にかけて次第に減速していくことを示します。ease-in-outイージング関数
cubic-bezier(0.42, 0.0, 0.58, 1.0)を表します。これは補間がゆっくり始まり、加速し、終わりに向かって減速することを示します。始めはease-inキーワードのように動作し、終わりはease-outキーワードのように動作します。
cubic-bezier()2 つの制御点を指定する 4 つの
<number>を用いて、カスタム曲線を定義します。X 座標は[0, 1]の範囲でなければなりません。
<step-easing-function>アニメーションを等間隔の数値に分割し、段階的な遷移を作成します。これにより、アニメーションは滑らかに遷移するのではなく、段階から次の段階へとジャンプするようになります。この関数は、次のいずれかを指定することで使用できます。
step-startイージング関数
steps(1, jump-start)またはsteps(1, start)を表します。補間はすぐに最終状態に遷移し、最後までその状態を維持します。step-endイージング関数
steps(1, jump-end)またはsteps(1, end)を表します。補間は、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。
形式文法
<easing-function> =
<linear-easing-function>|
<cubic-bezier-easing-function>|
<step-easing-function>
<linear-easing-function> =
linear|
<linear()>
<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>
<step-easing-function> =
step-start|
step-end|
<steps()>
<linear()> =
linear([<number>&&<percentage>{0,2}]#)
<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})
<steps()> =
steps(<integer> ,<step-position>?)
<step-position> =
jump-start|
jump-end|
jump-none|
jump-both|
start|
end
例
イージング関数の比較
この例では、提供されているボタンを使ってアニメーションを開始したり停止したりすることができ、メニューを選択してイージング関数を、利用可能なキーワードに加えていくつかのcubic-bezier() およびsteps() のオプションの中から選択することができるようになっています。オプションを選択した後、指定されたボタンを使用して、トランジションを始めたり、止めたりすることができます。
HTML
<div> <div></div></div><ul> <li> <button>アニメーションを開始</button> </li> <li> <label for="easing-select">イージング関数を選択:</label> <select> <option selected>linear</option> <option>linear(0, 0.5 50%, 1)</option> <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li></ul>CSS
body > div { position: relative; height: 100px;}div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient( circle at 10px 10px, rgb(25 255 255 / 80%), rgb(25 255 255 / 40%) ); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate;}@keyframes move-right { from { left: 10%; } to { left: 90%; }}li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}JavaScript
const selectElem = document.querySelector("select");const startBtn = document.querySelector("button");const divElem = document.querySelector("div > div");startBtn.addEventListener("click", () => { if (startBtn.textContent === "アニメーションを開始") { divElem.style.animationName = "move-right"; startBtn.textContent = "アニメーションを停止"; divElem.style.animationTimingFunction = selectElem.value; } else { divElem.style.animationName = "unset"; startBtn.textContent = "アニメーションを開始"; }});selectElem.addEventListener("change", () => { divElem.style.animationTimingFunction = selectElem.value;});結果
仕様書
| Specification |
|---|
| CSS Easing Functions Level 1 # easing-functions |
ブラウザーの互換性
関連情報
- CSS アニメーション
- CSS トランジション
- cubic-bezier.com - Lea Verou (2011)
linear()easing generator - Jake Archibald