Help us understand the problem. What is going on with this article?

【CSS】easeじゃ物足りない?だったらcubic-bezier()を使おうぜ!

開始タグ

要素をアニメーションさせたい!って時はtranstionを使いますよね。
easeだとなんか違うわ、ってなりますよね。
そんな時に使うあいつをメモ。

cubic-bezier()

こいつがとても優秀!
最初極端に早くて途中は普通最後は極端に遅く、とか自由自在にカスタムできちゃう。

使い方はとても簡単で、easeと同様に書いてあげるだけ。
()の中には数値を記入すればOK。

ただ、ちまちま手動で設定するのはさすがに苦行ですので、自分は以下のサービスを使っています。

cubic-bezier.com

Photoshopのトーンカーブみたいにベジェ曲線で調整できるからわかりやすいし、数値を設定したら実際のアニメーション動作もデモで確認できるし、アニメーションにかかる時間も設定できるのでとても便利です。

ちなみに自分のお気に入りはcubic-bezier(0.39, 0.575, 0.565, 1)
いい感じにホワッとしてくれるので、結構使ってます。

閉じタグ

cubic-bezier.comで遊ぶの楽しいです。
こんな動きするんや!と発見できますので、ぜひ遊んでみてください。

hacchi56
マークアップエンジニア3年目。愛知県在住の29歳です。バックエンドエンジニアを目指し「Ruby on Rails」を学習中。自分を疑っている部分もあるので、積極的に「LGTM」していただけると喜んじゃいます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした