css-transitions

two important attribute:  [ transition-property: all ] and [ transition-duration: 0.xs ]

transition-property mean that which attribute can use transition effect.

transition-duration mean that the candidate will use how long time to end.

regular function

linear, ease-in, ease-out. as up example, we can use some different function to finish transition.  

linear: the fixed speed

ease-in: start time has a lower speed, then it will speed up.

ease-out: start time has a higher speed, then it will speed down.

actually, it is a famous " bezier " function. 

you can use bezier function to finish same effect.

example:

cubic-bezier( 0.45, 0.05, 0.55, 0.95)

if you use chrome safari, you can change easily whith control panel.

step function

step function is very different with bezier.

main parameter: timesstart and end(start)

steps(times , end)

times mean that "steps"

end or start mean that you choice step spot.