Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@hacchi56

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

More than 1 year has passed since last update.

開始タグ

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

cubic-bezier()

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

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

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

cubic-bezier.com

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

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

閉じタグ

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

1
Help us understand the problem. What is going on with this article?
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
hacchi56
マークアップエンジニア3年目。愛知県在住の29歳です。バックエンドエンジニアを目指し「Ruby on Rails」を学習中。自分を疑っている部分もあるので、積極的に「LGTM」していただけると喜んじゃいます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?