CSS - animation-timing-function Property

---

---

The CSS property animation-timing-function determines the sequence of an animation over the entire duration of its cycle.

The use of the shorthand property animation is generally practical, as it allows all animation properties to be set at the same time.

• Easing functions in @keyframes rules can be defined individually. If nothing is specified, the animation-timing-function of the applied element is used.

• It's important to note that animation-timing-function within keyframes is an at-rule specific descriptor that is applied property-by-property until the next relevant keyframe or the end of the animation.

• Therefore, an animation-timing-function that is set to the 100% or to keyframe isn't used.

Possible Values

The CSS property animation-timing-function can have one of the following values:

1. <easing-function> - The easing function, which is linked to animation via animation-name, has preset patterns such as ease, linear, ease-in-out, etc., which are cubic bezier curves defined by fixed values.

The cubic-bezier() function allows user-defined values. Step easing functions split time into equal intervals based on step count and position.

• ease - The default value, which corresponds to cubic-bezier(0.25, 0.1, 0.25, 1.0), causes an acceleration in the middle of the animation, followed by a deceleration towards the end.

• linear - At a constant speed, cubic-bezier(0.0, 0.0, 1.0, 1.0) ensures a constant animation speed.

• ease-in - Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0), it starts gradually and accelerates the property transition until it's complete.

• ease-out - Similar to cubic-bezier(0, 0, 0.58, 1.0), it starts quickly and gradually slows down when the animation completely unfolds.

• ease-in-out - Similar to cubic-bezier(0.42, 0, 0.58, 1.0), this is a gradual start, acceleration and subsequent deceleration of the animating properties.

• cubic-bezier(p1, p2, p3, p4) - The cubic curve specified by the author requires values in the range from 0 to 1 for p1 and p3.

2. steps(n, <jumpterm>) - This property produces an animation with n stops evenly spaced across the transition.

The way in which these stops are positioned — whether at the beginning, at the end or distributed over the entire transition — depends on the selected jump term.

• jump-start - Represents a function that runs continuously from the left and triggers the initial jump when the animation starts.

• jump-end - Represents a function that is continuous from the right and triggers the last jump at the end of the animation. This behavior is the default setting.

• jump-none - There is no abrupt shift at either end, so there is no step in the interpolation sequence. Instead, a pause is inserted at both the 0% and 100% positions, each for a duration of 1/n.

• jump-both - Contains pauses at both the 0% and 100% position, essentially introducing an additional step within the animation sequence.

• start - Same as jump-start.

• end - Same as jump-end.

3. step-start- Equal to steps(1, jump-start).

4. step-end - Equal to steps(1, jump-end).

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Syntax

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

Applies To

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

CSS animation-timimg-function - ease Value

• The following example demonstrates animation-timing-function: ease value applied to box animation.

• The box moves vertically (translateY) with a 5-second duration and 5 iterations.

• The CSS class ease modifies the timing function, affecting the acceleration and deceleration of the animation.

• It speeds up towards the middle of animation and slows down at the end of it.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-demo {
      animation-timing-function: ease;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-demo">Ease</div>
</body>
</html> 

CSS animation-timimg-function - ease-in Value

• The following example demonstrates the animation-timing-function: ease-in value applied to box animation.

• The box moves vertically (translateY) with a 5-second duration and 5 iterations.

• The CSS class ease-in modifies the timing function, affecting the acceleration and deceleration of the animation.

• The animation begins slowly, with the transition speed increasing as it completes.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 400px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-in-demo {
      animation-timing-function: ease-in;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-in-demo">Ease-in</div>
</body>
</html> 

CSS animation-timimg-function - ease-out Value

• The following example demonstrates the animation-timing-function: ease-out value applied to box animation.

• The box moves vertically (translateY) with a 5-second duration and 5 iterations.

• The CSS class ease-out modifies the timing function, affecting the acceleration and deceleration of the animation.

• The animation begins quickly, slowing down as the animation progresses.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-out-demo {
      animation-timing-function: ease-out;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-out-demo">Ease-out</div>
</body>
</html> 

CSS animation-timimg-function - ease-in-out Value

• The following example demonstrates the animation-timing-function: ease-in-out value applied to box animation.

• The box moves vertically (translateY) with a 5-second duration and 5 iterations.

• The CSS class ease-in-out modifies the timing function, affecting the acceleration and deceleration of the animation.

• The animation slowly transitions, speeds up and then slows down again.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .ease-in-out-demo {
      animation-timing-function: ease-in-out;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box ease-in-out-demo">Ease-in-out</div>
</body>
</html> 

CSS animation-timimg-function - linear Value

• The following example demonstrates the animation-timing-function: linear value applied to box animation.

• The box moves vertically (translateY) with a 5-second duration and 5 iterations.

• The CSS class linear modifies the timing function, affecting the acceleration and deceleration of the animation.

• The animation is happening at an even speed.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }

   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .linear-demo {
      animation-timing-function: linear;
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box linear-demo">Linear</div>
</body>
</html> 

CSS animation-timimg-function - Custom Bezier Function

• The following example demonstrates the custom bezier function used as a value to animation-timing-function property.

• The box moves vertically (translateY) with a 5-second duration and 5 iterations.

• The cubic-bezier function in the custom-demo class allows creating a custom timing function using control points to control the animation's speed more precisely.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 250px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size:18px;
      margin: 10px;
      animation: move 5s 5;  
   }
   
   .custom-demo {
      /* Custom cubic-bezier timing function */
      animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box custom-demo">Cubic bezier</div>
</body>
</html> 

CSS animation-timing-function - Step-function - jump-start

• In the following example, the animation-timing-function: jump-start property is used to define the speed of the animation applied to the box.

• The class jump-start applies a timing function to alter the behavior of the box animation.

• This timing function decides how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

• As the animation begins, the first jump takes place.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .jump-start {
      animation-timing-function:steps(6, jump-start);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-start">Jump-start</div>
</body>
</html>

CSS animation-timing-function - Step-function - jump-end

• In the following example, the animation-timing-function: jump-end property is used to define the speed of the animation applied to the box.

• The class jump-end applies a timing function to alter the behavior of the box animation.

• This timing function decides how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

• As the animation end, the last jump takes place.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }

   .jump-end {
      animation-timing-function:steps(6, jump-end);
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-end">Jump-end</div>
</body>
</html>

CSS animation-timing-function - Step-function - jump-both

• In the following example, the animation-timing-function: jump-both property is used to define the speed of the animation applied to the box.

• The class jump-both applies a timing function to alter the behavior of the box animation.

• This timing function decides how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

• The jump takes place on either side, during an animation.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .jump-both {
      animation-timing-function:steps(6, jump-both);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-both">Jump-both</div>
</body>
</html>

CSS animation-timing-function - Step-function - jump-none

• In the following example, the animation-timing-function: jump-none property is used to define the speed of the animation applied to the box.

• The class jump-none applies a timing function to alter the behavior of the box animation.

• This timing function decides how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

• No jump on either ends take place.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .jump-none {
      animation-timing-function:steps(6, jump-none);
   }
   
   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box jump-none">Jump-none</div>
</body>
</html>

CSS animation-timing-function - Step-function - step-start

• In the following example, the animation-timing-function: step-start property is used to define the speed of the animation applied to the box.

• The class step-start applies a timing function to alter the behavior of the box animation.

• This timing function decides how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }

   .step-start {
      animation-timing-function: step-start;
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box step-start">Step-start</div>
</body>
</html>

CSS animation-timing-function - Step-function - step-end

• In the following example, the animation-timing-function: step-end property is used to define the speed of the animation applied to the box.

• The class step-end applies a timing function to alter the behavior of the box animation.

• This timing function decides how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }

   .step-end {
      animation-timing-function: step-end;
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box step-end">Step-end</div>
</body>
</html>

CSS animation-timing-function - Step-function - steps

• In the following example, the animation-timing-function: steps() property is used to define the speed of the animation applied to the box.

• The classes start and end, apply the timing functions to alter the behavior of the box animations.

• These timing functions decide how the animation progresses over time, influencing characteristics like acceleration, deceleration, or step-based movement.

     
<html>
<head>
<style>
   body {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 350px;
      margin: 0;
   }
   
   .box {
      width: 100px;
      height: 50px;
      background-color: coral;
      border: 2px solid black;
      display: flex;
      justify-content: center; 
      align-items: center; 
      text-align: center;
      font-size: 16px;
      margin: 10px;
      animation: move 6s infinite;
   }
   
   .start {
      animation-timing-function: steps(6, start);
   }
   .end {
      animation-timing-function: steps(6, end);
   }

   @keyframes move {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(250px);
      }
   }
</style>
</head>
<body>
   <div class="box start">Start</div>
   <div class="box end">End</div>
</body>
</html>