Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS animation-timing-function Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 12 - Views
⏳ 4 mins
💬 1 Comment
CSS animation-timing-function Property

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
Copy To Clipboard
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

ValueDescription
easeThe animation starts slowly, speeds up in the middle, and then slows down again. This is the default value.
linearThe animation progresses at a constant speed from start to finish.
ease-inThe animation starts slowly and then speeds up.
ease-outThe animation starts quickly and then slows down towards the end.
ease-in-outThe animation starts and ends slowly, with a faster speed in the middle.
step-startThe animation jumps immediately to the end state at the start.
step-endThe 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy