Danya Lette

Transition-Timing-Function

css

So, obviously

transition: all 1s ease;

and

transition: all 1s linear;

but did you know

transition: all 1s cubic-bezier(0.42,0,0.58,1);

???

The property transition-timing-function (used to determine the rate of change of the transitioned attribute, as a function of time) can take the following values:

ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(n,n,n,n)
initial
inherit

where

linear       is   cubic-bezier(0,0,1,1);
ease         is   cubic-bezier(0.25,0.1,0.25,1);
ease-in      is   cubic-bezier(0.42,0,1,1);
ease-out     is   cubic-bezier(0,0,0.58,1);
ease-in-out  is   cubic-bezier(0.42,0,0.58,1);

Try using the value

transition-timing-function: cubic-bezier(0,0.6,1,0);

That one should be called…static-friction.