Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the default CSS easing curves?

Tags:

css

easing

In css, we can use easing for transitions, eg:

transition: all .5s ease-in-out

There are built-in CSS easings, such as ease, ease-in, ease-out, and ease-in-out.

We can also define a custom easing using a cubic bezier, eg:

transition: all .5s cubic-bezier(.42, 0, 1, 1)

I've been given the values for a desired transition easing (which may very well be the same as the defaults, I don't know), but before I pollute my CSS with custom easing values, I wanted to compare them to the defaults. My research has come up empty, and thought it might be nice to have an authoritative answer here at stackoverflow.

What are the CSS default easing cubic-bezier curve values?

like image 407
random_user_name Avatar asked Nov 02 '25 15:11

random_user_name


1 Answers

According to the W3 and MDN:

ease = cubic-bezier(0.25, 0.1, 0.25, 1).

ease-in = cubic-bezier(0.42, 0, 1, 1).

ease-out = cubic-bezier(0, 0, 0.58, 1).

ease-in-out = cubic-bezier(0.42, 0, 0.58, 1).

linear = cubic-bezier(0.0, 0.0, 1.0, 1.0).

like image 181
j08691 Avatar answered Nov 04 '25 06:11

j08691



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!