6

According to this article on W3C for CSS Transitions, it is said to be

ease

The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).

ease-in-out

The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1)

And I think the difference is obvious in terms of numbers, but what is the actual difference and why should one have an option of ease-in-out separately?

Could somebody please explain the actual usage?

UPDATE

This may be regarded as a duplicate for

Difference between CSS3 transitions' ease-in and ease-out

But it is not, as the accepted answer on the referenced question just tells:

ease is like ease-in-out, except it starts slightly faster than it ends.

And I already know that. My question is, as stated above, about the practical usage.

Community
  • 1
  • 1
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • Its for the animation transition. for example a designer wants an animation of his design that goes in slowly and goes out slightly faster all with in the same 2 second duration, he'll use the ease-in-out transition to do that. – PauAI Feb 02 '16 at 03:25
  • What exactly are you asking that you can't directly observe for yourself? – TylerH Feb 02 '16 at 03:38
  • 5
    It is very nicely explained [here](http://stackoverflow.com/questions/9629346/difference-between-css3-transitions-ease-in-and-ease-out) – hkasera Feb 02 '16 at 03:41
  • @TylerH I've asked it as clear as I can: Practically, why does `ease-in-out` exist? @hkasera No it does not, BTW thanks for sharing the link – Peyman Mohamadpour Feb 02 '16 at 03:46
  • That's about as good an answer as you're going to get; it answers exactly what you asked here. Its usage is the same as any of the other timing bezier curves; people like that timing. – TylerH Feb 02 '16 at 03:47
  • Re: your edit: it's a timing function; there is no practical usage. If you want your transitions to happen at a variable rate, you use a bezier timing curve. Just like how some CSS colors are defined by name. – TylerH Feb 02 '16 at 03:59
  • [This UX Collective article](https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9#52da) explains the usage of different easing methods quite nicely. "Whenever you doubt what type of motion to use in your animation, use standard curve [(ease/ease-in-out)]." It goes on to explain "asymmetric curves", which for an ease-in-out animation is equal to the `ease` CSS value, where `ease-in-out` is symmetric. – zykadelic Jan 24 '19 at 15:04

0 Answers0