CSS CSS Transitions and Transforms Transition Timing Functions and Delays Change a Transition's Speed with Timing Functions

Anwar Rizalman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Anwar Rizalman
Python Development Techdegree Graduate 33,620 Points

Transition Timing Function: ease vs ease-in-out?

just would like to know the difference above. In the video the description was pretty much all the same only the cubic function is different.

ps : the link regarding the timing function property values is broken.

Audra Ogilvy
Audra Ogilvy
3,142 Points

I have the same question. Sounds like "ease" and "ease-in-out" do the same thing.

Ease-in will start the animation slowly, and finish at full speed.

Ease-out will start the animation at full speed, then finish slowly.

Ease-in-out will start slowly, be fastest in the middle of the animation, then finish slowly.

Ease is like ease-in-out, except it starts slightly faster than it ends; thus, is the fastest default rendering all things held equally with the smoothest transition speed start to end.