transition-timing-function

Ease (default): accelerate sharply – decelerate
linear: no speed change
ease-in: accelerate smoothly
ease-out: decelerate smoothly
ease-in-out: accelerate smoothly – decelerate smoothly
steps( n, <jumpterm>): Staircase functions enable animation to jump between the specific number of frames in a non-continuous way.

Easing Function	`cubic-bezier` Value	Starting Speed	Middle Speed	Ending Speed
`linear`	`cubic-bezier(0.0, 0.0, 1.0, 1.0)`	constant	constant	constant
`ease`	`cubic-bezier(0.25, 0.1, 0.25, 1.0)`	sharp acceleration	acceleration	deceleration
`ease-in`	`cubic-bezier(0.42, 0, 1.0, 1.0)`	smooth acceleration	acceleration	full speed
`ease-out`	`cubic-bezier(0, 0, 0.58, 1.0)`	full speed	deceleration	smooth deceleration
`ease-in-out`	`cubic-bezier(0.42, 0, 0.58, 1.0)`	smooth acceleration	full speed	deceleration

Leave a comment Cancel reply