CSS - transition-timing-function Property

CSS transition-timing-function property is used to specify the speed curve of a CSS transition. It defines how the intermediate values between the start and end of the transition are calculated.

Possible Values

  • <easing-function> − Each <easing-function> defines the easing function to link with the relevant property to transition, as stated in transition-property.

  • ease − Default value. Starts slowly, accelerates in the middle, and slows down at the end..

  • ease-in − Starts slowly and accelerates towards the end..

  • ease-out − Starts quickly and decelerates towards the end..

  • ease-in-out − Combines the characteristics of both ease-in and ease-out.

  • linear − Transitions at an even speed and is equal to cubic-bezier(0.0, 0.0, 1.0, 1.0).

  • step-start − Similar to steps(1, jump-start).

  • step-end − Similar to steps(1, jump-end).

  • cubic-bezier(p1, p2, p3, p4) − Allows you to define your own cubic Bezier function. The values must be between 0 and 1.

  • steps( n, <jumpterm>) − The transition can be divided into n stops, with each stop lasting an equal amount of time.

  • jump-start − Indicates a left-continuous function, representing that as the transition starts at the point where the first jump occurs.

  • jump-end − Indicates a right-continuous function, representing that the final jump occurs at the end of the animation.

  • jump-none − No jump occurs at either end. Alternatively, maintain positions at 0% and 100% marks, each for a duration of 1/n.

  • jump-both − Pauses at both the 0% and 100% marks add a step to the transition time.

  • start − Similar to a jump-start.

  • end − Similar to a jump-end.

Applies to

All elements, ::before and ::after pseudo-elements.

Syntax

Keyword Values

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

Function Values

transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

Steps Function keywords

transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

Points to be remembered

  • In essence, this allows you to define an acceleration curve, which allows you to vary the speed of the transition throughout its duration.

  • The acceleration curve is created by defining each transitioning property with a <easing-function>.

  • When using multiple easing functions in CSS transitions, each function corresponds to a property specified by the transition-property, acting as a transition-property list. If easing functions are less than transition properties, the user agent repeats the list of values to calculate the appropriate values for each property. If there are more functions, it is truncated to the appropriate size. The CSS declaration remains valid in both cases.

CSS transition-timing-function - cubic-Bezier Example

The following example demonstrates the use of the transition-timing-function property with different function valuess −

<html>
<head>
<style>
   div {
      width: 120px;
      padding: 10px;
      transition-property: all; 
      background-color: yellow;
      transition-duration: 3s;
      margin: 5px;
   }
   div:hover {
      background-color: green;
      padding-right: 200px;
      color: white;
   }
   .box1 {
      transition-timing-function: ease;
   }
   .box2 {
      transition-timing-function: ease-in;
   }
   .box3 {
      transition-timing-function: ease-out;
   }
   .box4 {
      transition-timing-function: ease-in-out;
   }
   .box5 {
      transition-timing-function: linear;
   }
   .box6 {
      transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
   }
</style>
</head>
<body>
   <div class="box1">ease</div>
   <div class="box2">ease-in</div>
   <div class="box3">ease-out</div>
   <div class="box4">ease-in-out</div>
   <div class="box5">linear</div>
   <div class="box6">cubic-bezier(0.2, -2, 0.8, 2)</div>
</body>
</html>

CSS transition-timing-function - steps Example

The following example demonstrates the use of the transition-timing-function property with different step-based timing functions −

<html>
<head>
<style>
   div {
      width: 140px;
      padding: 10px;
      transition-property: all; 
      background-color: yellow;
      transition-duration: 3s;
      margin: 5px;
   }
   div:hover {
      background-color: green;
      padding-right: 200px;
      color: white;
   }
   .box1 {
      transition-timing-function: steps(4, jump-start);
   }
   .box2 {
      transition-timing-function: steps(4, jump-end);
   }
   .box3 {
      transition-timing-function: steps(4, jump-none);
   }
   .box4 {
      transition-timing-function: steps(4, jump-both);
   }
   .box5 {
      transition-timing-function: step-start;
   }
   .box6 {
      transition-timing-function: step-end;
   }
</style>
</head>
<body>
   <div class="box1">steps(4, jump-start)</div>
   <div class="box2">steps(4, jump-end)</div>
   <div class="box3">steps(4, jump-none)</div>
   <div class="box4">steps(4, jump-both)</div>
   <div class="box5">step-start</div>
   <div class="box6">step-end</div>
</body>
</html>
Advertisements