開始タグ
要素をアニメーションさせたい！って時はtranstionを使いますよね。
easeだとなんか違うわ、ってなりますよね。
そんな時に使うあいつをメモ。
cubic-bezier()
こいつがとても優秀！
最初極端に早くて途中は普通最後は極端に遅く、とか自由自在にカスタムできちゃう。
使い方はとても簡単で、easeと同様に書いてあげるだけ。
()の中には数値を記入すればOK。
ただ、ちまちま手動で設定するのはさすがに苦行ですので、自分は以下のサービスを使っています。
Photoshopのトーンカーブみたいにベジェ曲線で調整できるからわかりやすいし、数値を設定したら実際のアニメーション動作もデモで確認できるし、アニメーションにかかる時間も設定できるのでとても便利です。
ちなみに自分のお気に入りはcubic-bezier(0.39, 0.575, 0.565, 1)。
いい感じにホワッとしてくれるので、結構使ってます。
閉じタグ
cubic-bezier.comで遊ぶの楽しいです。
こんな動きするんや！と発見できますので、ぜひ遊んでみてください。