transition-timing-function

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.

Example

Initial value ease
Applies to all elements, ::before and ::after pseudo-elements

Syntax

  
transition-timing-function: ease-out;
  

Values

Each represents the easing function to link to the corresponding property to transition, as defined in transition-property. The non-step keyword values (ease, linear, ease-in-out, etc.) each represent cubic Bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. The step timing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position. ease Equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the transition, slowing back down at the end. linear Equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), transitions at an even speed. ease-in Equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the transition speed increasing until complete. ease-out Equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues. • ease-in-out Equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again. cubic-bezier(p1, p2, p3, p4) An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1. steps( n, ) Displays the transition along n stops along the transition, displaying each stop for equal lengths of time. For example, if n is 5,  there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: jump-start Denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end Denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration jump-both Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time. start Same as jump-start. end Same as jump-end. step-start Equal to steps(1, jump-start) step-end Equal to steps(1, jump-end)
Equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the transition, slowing back down at the end.
Equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), transitions at an even speed.
Equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the transition speed increasing until complete.
Equal to cubic-bezier(0, 0, 0.58, 1.0), starts transitioning quickly, slowing down the transition continues. •
Equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again.
An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.
Displays the transition along n stops along the transition, displaying each stop for equal lengths of time. For example, if n is 5,  there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: jump-start Denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end Denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration jump-both Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time. start Same as jump-start. end Same as jump-end.
Denotes a left-continuous function, so that the first jump happens when the transition begins;
Denotes a right-continuous function, so that the last jump happens when the animation ends;
There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration
Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.
Same as jump-start.
Same as jump-end.
Equal to steps(1, jump-start)
Equal to steps(1, jump-end)

Browser support

transition-timing-function2612161012.19
jump7779656414

We use cookies to improve your experience. Learn more in our Privacy policy.

×