Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
この 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)
値
-
一定の速度で進行する遷移を作成します。この関数は、次のいずれかを使用して指定することができます。
-
変化を可変の割合で行うスムーズな繊維を作成します。この関数は次のいずれかで指定することができます。
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 つの
[0, 1]の範囲でなければなりません。
-
アニメーションを等間隔の数値に分割し、段階的な遷移を作成します。これにより、アニメーションは滑らかに遷移するのではなく、段階から次の段階へとジャンプするようになります。 この関数は、次のいずれかを指定することで使用できます。
step-start-
イージング関数
steps(1, jump-start)またはsteps(1, start)を表します。 補間はすぐに最終状態に遷移し、最後までその状態を維持します。 step-end-
イージング関数
steps(1, jump-end)またはsteps(1, end)を表します。 補間は、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。
形式文法
例
イージング関数の比較
この例では、提供されているボタンを使ってアニメーションを開始したり停止したりすることができ、メニューを選択してイージング関数を、利用可能なキーワードに加えていくつかの cubic-bezier() および steps() のオプションの中から選択することができるようになっています。オプションを選択した後、指定されたボタンを使用して、トランジションを始めたり、止めたりすることができます。
HTML
-
-
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