Tutorials


CSS animation-timing-function property


The animation-timing-function property in CSS controls the pacing of an animation. It determines how the intermediate steps of the animation are calculated, which affects the speed curve of the animation. Essentially, it defines how the animation progresses over time, making the animation speed up, slow down, or maintain a constant speed.

Syntax

element {
  animation-timing-function: function;
}
  • function: Specifies the timing function to use. It can be one of several predefined values or a custom cubic-bezier function.

Common Values

  1. linear:

    • The animation progresses at a constant speed from start to end.
    animation-timing-function: linear;

  2. ease:

    • The animation starts slowly, speeds up in the middle, and slows down at the end. This is the default value.
    animation-timing-function: ease;

  3. ease-in:

    • The animation starts slowly and then speeds up.
    animation-timing-function: ease-in;

  4. ease-out:

    • The animation starts quickly and then slows down towards the end.
    animation-timing-function: ease-out;

  5. ease-in-out:

    • The animation starts slowly, speeds up in the middle, and then slows down again towards the end.
    animation-timing-function: ease-in-out;

  6. cubic-bezier(n,n,n,n):

    • Allows you to define a custom timing function using a cubic-bezier curve. The values are four numbers between 0 and 1 that define the curve's control points.
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  7. steps(number, [start|end]):

    • Creates a stepping function where the animation jumps from one state to the next. The number specifies the number of steps, and start or end specifies when the jump occurs within each step.
    animation-timing-function: steps(4, end);

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation Timing Function Example</title>
  <style>
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-150px);
      }
      60% {
        transform: translateY(-75px);
      }
    }

    .animated-box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: bounce;
      animation-duration: 2s;
      animation-timing-function: ease-in-out;
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

Explanation:

  • @keyframes bounce:

    • Defines an animation that makes the element bounce up and down.

  • .animated-box:

    • The animation-name property applies the bounce animation.
    • The animation-duration property sets the animation to last 2 seconds.
    • The animation-timing-function property uses ease-in-out, which causes the bouncing effect to start slowly, speed up in the middle, and slow down at the end.

Important Points

  1. Default Value:

    • The default value for animation-timing-function is ease, which provides a smooth start and end to the animation.

  2. Timing Functions:

    • Different timing functions create various visual effects. For example, ease provides a natural look, while linear gives a uniform speed.

  3. Cubic Bezier Functions:

    • Custom cubic-bezier functions allow precise control over the timing of the animation. You can use online tools like Cubic Bezier Generator to create and visualize these curves.

  4. Steps Timing Function:

    • The steps function is useful for creating animations that have discrete changes rather than smooth transitions, like animation frames or progress bars.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about