cssのtiming-function
transitionやanimationに使われるtiming-funcitonについてです
たいていlinearかeaseしか使わないtiming-functionですがcubic-bezier()を使って詳細に設定できます
動きを確かめるときはこのサイトが便利です
cubic-bezier関数の使い方は cubic-bezier(x1,y1,x2,y2)です
4つの点を指定してベジェ曲線を書きます
上の図の曲線です
4つの内2つは始点と終点で固定されています
(0,0)と(1,1)です
それ以外の2つをcubic-bezier関数を使って指定します
1つめは上の図のピンク色の●のところで 2つめは水色の●のところです
x1: ピンクの●のx座標(横にどれだけか)
y1: ピンクの●のy座標(縦にどれだけか)
x2: 水色の●のx座標(横にどれだけか)
y2: 水色の●のy座標(縦にどれだけか)
この2つの丸は始点と終端からできる四角形の外側にも設定できます
曲線が0と1を超えた位置に来ることができます
こうなると アニメーションが始まるとアニメーションの方向と反対側に一度少し戻ってから行き先を少し行き過ぎて最終地点に戻ってくるアニメーションになります
ボールが跳ねたり バネをひっぱったみたいに 行き過ぎて戻ってきてまた行きすぎて……と繰り返して最終的に止まるというのはできません
一度だけ行き過ぎて戻ってきます
そういうことがしたい場合はJavaScriptを書くしかないです
いくつかのパターンを並べたサンプルです
一番下のstartボタンを押すと動きます
サンプル
たいていlinearかeaseしか使わないtiming-functionですがcubic-bezier()を使って詳細に設定できます
動きを確かめるときはこのサイトが便利です
cubic-bezier関数の使い方は cubic-bezier(x1,y1,x2,y2)です
4つの点を指定してベジェ曲線を書きます
上の図の曲線です
4つの内2つは始点と終点で固定されています
(0,0)と(1,1)です
それ以外の2つをcubic-bezier関数を使って指定します
1つめは上の図のピンク色の●のところで 2つめは水色の●のところです
x1: ピンクの●のx座標(横にどれだけか)
y1: ピンクの●のy座標(縦にどれだけか)
x2: 水色の●のx座標(横にどれだけか)
y2: 水色の●のy座標(縦にどれだけか)
この2つの丸は始点と終端からできる四角形の外側にも設定できます
曲線が0と1を超えた位置に来ることができます
こうなると アニメーションが始まるとアニメーションの方向と反対側に一度少し戻ってから行き先を少し行き過ぎて最終地点に戻ってくるアニメーションになります
ボールが跳ねたり バネをひっぱったみたいに 行き過ぎて戻ってきてまた行きすぎて……と繰り返して最終的に止まるというのはできません
一度だけ行き過ぎて戻ってきます
そういうことがしたい場合はJavaScriptを書くしかないです
いくつかのパターンを並べたサンプルです
一番下のstartボタンを押すと動きます
サンプル