CSS Transitions(linear, ease, ease-in,etc.)

All the different properties for the CSS3 animation and transition can be confusing at first. The typical properties are usually:linear, ease, ease-in, ease-out, ease-in-out

Here is a quick summary: 

linear: no acceleration or slow down
ease: fast beginning and a slowdown at the end (the default)
ease-in: start slow and then finish fast
ease-out: normal beginning and slowdown at the end
ease-in-out: starts slow, fast in the middle and finish slow

A simple way to thinking of it is to think of “ease” as “take it easy- in this position“, so for example:
“ease-in”: Take it easy near the beginning
“ease-out”: Take it easy at the end
“ease-in-out” Take it easy at the beginning and the end

Leave a Reply