前提
CSS でのアニメーション実行スピード調整に cubic-bezier を使用したとき、何をしているのかあまり理解ができていなかったので既出の記事も多くあるかと思いますが自分の中で咀嚼するため書きました。
cubic-bezier
CSS3 でアニメーションを行うときのイージングの値は linear, ease, ease-in, ease-out, ease-in-out が用意されており、用意されいてるイージング以外を設定したい場合に cubic-bezier(x1,y1,x2,y2)を用います。
名前の通りベジェ曲線の X軸, Y軸 を使ってイージングスピードの設定を細かくおこなう。
イージングの値
| 値 | どういう動きなのか |
|---|---|
| ease | 【初期値】開始と完了を滑らかにする |
| linear | 一定の速度 |
| ease-in | ゆっくり 始まる |
| ease-out | ゆっくり 終わる |
| ease-in-out | ゆっくり 始まり ゆっくり 終わる |
| cubic-bezier(x1,y1,x2,y2) | 数値で細かく指定 |
アニメーションさせたいときのプロパティ
animation は animation-timing-function,
transition は transition-timing-function の値に入力する。
※ブラウザは IE11, Edge も対応しているのでべンダープレフィックスは基本的には不要
使い方
SCSS で使用したい数値をまとめて変数化しておくと便利。
hoge.scss
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
.hoge {
transition: all .2s $easeInQuad;
}
数値入力がよくわからん
細かなイージング調整に数値入力が必要なので扱いが難しく感じますが、ジェネレータに頼れば視覚的に操作できます。積極的に使用します。
https://cubic-bezier.com/
イージング参考に素晴らしいページ
http://easings.net/
まとめ
アニメーションさせるときに cubic-bezier 以外の値ばかり使っていたので、これからは積極的に使っていきます。