CSS Timing Functions and Delays

Timing functions and delays are crucial aspects of creating smooth and interactive CSS transitions and animations. In this tutorial, you will learn how to use these properties to control the speed and delay of your animations and transitions, with sample code and simple explanations.

Timing Functions

A timing function determines the speed curve of an animation or transition, controlling how it progresses over time. Common values include ease, linear, ease-in, ease-out, and ease-in-out.

• ease: The default value, starts slow, speeds up, and then slows down.
• linear: A constant speed throughout the animation.
• ease-in: Starts slow and speeds up.
• ease-out: Starts fast and slows down.
• ease-in-out: Starts slow, speeds up, and then slows down.

You can also use custom cubic-bezier curves or step functions for more precise control.

Example:

CSS

div {
  transition: width 2s ease-in-out;
}

Delays

Delays determine when a transition or animation starts. Use the transition-delay or animation-delay property to specify the delay in seconds (s) or milliseconds (ms).

Example:

CSS

div {
  transition: width 2s ease-in-out;
  transition-delay: 1s;
}

/* or */

div {
  animation: changeBackgroundColor 3s ease-in-out;
  animation-delay: 1s;
}

Conclusion

Using timing functions and delays, you can create smooth and interactive CSS transitions and animations. These properties allow you to control the speed and timing of your animations, making your web designs more engaging and responsive to user interactions.