Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS transition-timing-function Property

Posted in CSS Tutorial
Updated on Jul 15, 2024
By Mari Selvan
👁️ 24 - Views
⏳ 4 mins
💬 1 Comment
CSS transition-timing-function Property

Photo Credit to CodeToFun

🙋 Introduction

The transition-timing-function property in CSS defines how intermediate values for CSS properties being affected by a transition are calculated.

This property allows you to control the speed of the transition, making it start slowly, speed up, or slow down at different points during the transition. It is essential for creating smooth and natural animations on your web pages.

💡 Syntax

The syntax for the transition-timing-function property is as follows:

Syntax
Copied
Copy To Clipboard
element {
  transition-timing-function: timing-function;
}

Here, timing-function can be one of several predefined keywords, a cubic-bezier function, or the steps function.

🎛️ Default Value

The default value of the transition-timing-function property is ease, which starts the transition slowly, speeds it up in the middle, and slows it down again before completion.

🏠 Property Values

ValueDescription
easeStarts slow, speeds up, then slows down (default).
linearConstant speed from start to finish.
ease-inStarts slow, then speeds up.
ease-outStarts fast, then slows down.
ease-in-outStarts slow, speeds up, then slows down.
cubic-bezier(n, n, n, n)Defines a cubic Bezier curve. The values range from 0 to 1.
steps(int,start/end)Divides the transition into equal steps. The integer specifies the number of steps.

📄 Example

In this example, we'll change the background color of a <div> element with a smooth transition using the ease-in-out timing function.

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 transition-timing-function Example</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: background-color 2s;
      transition-timing-function: ease-in-out;
    }
    div:hover {
      background-color: green;
    }
  </style>
</head>
<body>
  <h1>Transition Timing Function Example</h1>
  <div></div>
</body>
</html>

🖥️ Browser Compatibility

The transition-timing-function property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is also supported in Internet Explorer 10 and later. As always, it is recommended to test your website across different browsers to ensure full compatibility.

🎉 Conclusion

The transition-timing-function property is a vital tool for creating smooth and natural animations on your web pages.

By understanding and utilizing this property, you can enhance the user experience with subtle and effective transitions. Experiment with different timing functions to see how they can improve the look and feel of your web projects.

👨‍💻 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