CSS animation-timing-function Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 20 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation-timing-function property in CSS defines how the intermediate states of an animation sequence are calculated. It allows you to control the speed curve of the animation, making it accelerate, decelerate, or even have a custom timing throughout its duration.

This property is crucial for creating smooth and visually appealing animations on your website.

💡 Syntax

The syntax for the animation-timing-function property can take several forms, depending on the desired timing function:

Syntax

Copied

element {
  animation-timing-function: timing-function;
}

Here, timing-function can be one of the predefined keyword values, or a custom cubic-bezier function.

🎛️ Default Value

The default value for the animation-timing-function property is ease. This causes the animation to start slowly, accelerate in the middle, and slow down again before finishing.

🏠 Property Values

Value	Description
ease	The animation starts slowly, speeds up in the middle, and then slows down again. This is the default value.
linear	The animation progresses at a constant speed from start to finish.
ease-in	The animation starts slowly and then speeds up.
ease-out	The animation starts quickly and then slows down towards the end.
ease-in-out	The animation starts and ends slowly, with a faster speed in the middle.
step-start	The animation jumps immediately to the end state at the start.
step-end	The animation jumps to the end state at the end of the duration.
steps(int, start\|end)	The animation advances in steps. The first argument defines the number of steps, and the second argument defines whether the steps occur at the start or end of each interval.
cubic-bezier(x1, y1, x2, y2)	A custom cubic bezier curve defined by four points.

📄 Example

In this example, we'll create a simple animation that moves a box across the screen. The animation-timing-function is set to ease-in-out, so the box will move slowly at the beginning and end, and quickly in the middle.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS animation-timing-function Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      animation: move 4s infinite;
      animation-timing-function: ease-in-out;
    }

    @keyframes move {
      0% { left: 0; }
      100% { left: 300px; }
    }
  </style>
</head>
<body>
  <h1>Animation Timing Function Example</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The animation-timing-function property is widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It works consistently across these platforms, making it a reliable choice for controlling animations.

🎉 Conclusion

The animation-timing-function property gives you fine control over the pacing of your animations, allowing you to create more dynamic and engaging visual effects.

Whether you're using one of the predefined timing functions or crafting a custom cubic bezier curve, this property is essential for producing polished, professional-looking animations on your website.