Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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
Posted by Anwar Rizalman
.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
Audra Ogilvy
Audra Ogilvy
3,142 Points

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

Gavin Schilling
Gavin Schilling
37,904 Points

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.