Transitions

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.

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

valuedescription
linearSpecifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
easeDefault value. Specifies a transition effect with a slow start, then fast, then end slowly
ease-inSpecifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-outSpecifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-outSpecifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))

Leave a Reply

Your email address will not be published. Required fields are marked *