transitionやanimationに使われるtiming-funcitonについてです

たいていlinearかeaseしか使わないtiming-functionですがcubic-bezier()を使って詳細に設定できます

動きを確かめるときはこのサイトが便利です
cubic-bezier-sample

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つの丸は始点と終端からできる四角形の外側にも設定できます
cubic-bezier-sample-over
曲線が0と1を超えた位置に来ることができます
こうなると アニメーションが始まるとアニメーションの方向と反対側に一度少し戻ってから行き先を少し行き過ぎて最終地点に戻ってくるアニメーションになります

ボールが跳ねたり バネをひっぱったみたいに 行き過ぎて戻ってきてまた行きすぎて……と繰り返して最終的に止まるというのはできません
一度だけ行き過ぎて戻ってきます
そういうことがしたい場合はJavaScriptを書くしかないです

いくつかのパターンを並べたサンプルです
一番下のstartボタンを押すと動きます
サンプル