transition-timing-function property
The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.
The values include:linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit
To learn more about the property, check out the W3 Schools page
The values demonstrated below are
value | description |
---|---|
linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly |
ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |