transition-timing-function

transition-timing-function defines the function of dependency of the property value on time. In other words, this function determines the speed of the flow of the animation.

In the example below, the color property will change linearly (evenly) over 300 ms.

        
          
          .box {  transition-property: color;  transition-duration: .3s;  transition-timing-function: linear;}
          .box {
  transition-property: color;
  transition-duration: .3s;
  transition-timing-function: linear;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Keywords as values:

        
          
          .selector {  transition-timing-function: ease; /* Used by default */  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;}
          .selector {
  transition-timing-function: ease; /* Used by default */
  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;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Function descriptions as values:

        
          
          .selector {  transition-timing-function: steps(4, jump-end);  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);}
          .selector {
  transition-timing-function: steps(4, jump-end);
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Additional parameters for the Steps function:

        
          
          .selector {  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);}
          .selector {
  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);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Specifying multiple functions:

        
          
          .selector {  transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);}
          .selector {
  transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

For example, we need to change some property from 0 to 100 over 1 second. During this second, the value of the property can change at different speeds. How exactly — is described by our function.

For instance, if the property changes evenly throughout the second, then it is a linear dependency, which is described by the keyword linear and looks like this:

If the property changes quickly at first, and then slower, this dependency is described by the keyword ease-out and looks like this:

In general, the graph of the function is described by the value cubic-bezier(p1, p2, p3, p4). The parameters p1 and p3 must be numbers from 0 to 1.

Each keyword corresponds to its function graph with specific coefficients:

• linear — cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease — cubic-bezier(0.25, 0.1, 0.25, 1.0)
• ease-in — cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out — cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out — cubic-bezier(0.42, 0, 0.58, 1.0)

The property can be changed not smoothly, but in jumps. The steps function describes how many steps the property change should happen in.

        
          
          .box {  transition-timing-function: steps(5, jump-start);}
          .box {
  transition-timing-function: steps(5, jump-start);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The first parameter indicates the number of steps over which the property will change. Each step will be displayed for an equal amount of time.

The second parameter defines the logic by which the interval will be divided into segments.

For example, if the first parameter is 5, then there will be a total of 5 steps. At each step, the display will pause, following one of the conditions depending on the second parameter. The second parameter can take the following values:

jump-start, jump-end, jump-both, jump-none, start, end

• at 20%, 40%, 60%, 80%, and 100% — jump-start. At the moment the animation starts, the current value will jump immediately to 20% and pause there for $1/5$ of the time.
• at 0%, 20%, 40%, 60%, and 80% — jump-end. The current value starts pausing immediately at 0%.
• or will make 5 stops in the interval between 0% and 100% (16%, 33%, 50%, 66%, 84%) — jump-both
• or will make 5 stops, including 0% and 100% (0%, 25%, 50%, 75%, 100%) — jump-none

Interestingly, Safari did not support these values until version 13.1 (Catalina) 🤷‍♂️
Starting from version 14 (Big Sur), everything is fine in Safari 🙂

Depending on the current browser in use, the example below may vary:

The keywords step-start and step-end are synonyms for the notation steps(1, jump-start) and steps(1, jump-end). The change occurs in a jump in one step.

step-start transitions to the final state immediately at the start of the animation and waits for the end of the animation.

step-end waits for the end of the animation and then transitions to the final state.

💡 If the transition-timing-function property is not specified, the browser will use the ease function and its corresponding description cubic-bezier(0.25, 0.1, 0.25, 1.0) by default.

💡 By setting coefficients p2 and p4 less than 0 or greater than 1, you can achieve a "spring" effect, which in some cases can make the animation more interesting.

        
          
          .selector {  transition-timing-function: cubic-bezier(1, .2, .52, .46);}
          .selector {
  transition-timing-function: cubic-bezier(1, .2, .52, .46);
}

        
        
          
            
            Copy
            Copied
            Failed to copy