2

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?

random_user_name
  • 25,694
  • 7
  • 76
  • 115
  • I'm not sure this needs a dedicated answer on Stack Overflow, as it was easily found on W3Schools, and even the link you provided has the default `ease` set to `.25,0.1,0.25,1` – disinfor Oct 10 '19 at 20:34
  • 1
    Well, you may be right. However, I did actually search around without luck, I don't particularly rely on / trust W3Schools. – random_user_name Oct 10 '19 at 20:36
  • You're right, it's not the default! It looks like I clicked the `ease` button and refreshed the page (has the coords as a hash in the URL) and sets it to those values. To be clear, I think this is useful. Out of curiosity, if anyone is over 25k rep, are there analytics to view about people looking up this question on Stack (not this particular question, but keywords leading to Stack questions)? – disinfor Oct 10 '19 at 20:40
  • 1
    I don't know the answer about the analytics. I'm guessing there are, but don't have the rep myself :) – random_user_name Oct 10 '19 at 20:45

2 Answers2

4

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).

j08691
  • 204,283
  • 31
  • 260
  • 272
1

From W3Schools:

See the equivalent function values in the table below.

enter image description here

Liftoff
  • 24,717
  • 13
  • 66
  • 119