How to Set Transition Timing Function in CSS

Use the transition-timing-function property in CSS to control the speed curve of a transition effect. You can set it to predefined values like ease, linear, or use a custom cubic-bezier() function for precise control.

Syntax

The transition-timing-function property defines how the intermediate states of a CSS transition are calculated over time.

• transition-timing-function: value;
• value can be keywords like ease, linear, ease-in, ease-out, ease-in-out, or a custom cubic-bezier(x1, y1, x2, y2) function.

css

selector {
  transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2);
}

Example

This example shows a box that changes its background color smoothly with a custom timing function when you hover over it.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}
.box {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  transition-property: background-color;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* This creates a bounce effect */
}
.box:hover {
  background-color: #e74c3c;
}

Output

A blue square in the center of the page changes to red with a smooth bounce effect over 2 seconds when hovered.

Common Pitfalls

Common mistakes when setting transition-timing-function include:

• Not specifying transition-property or transition-duration, so the timing function has no effect.
• Using invalid values or syntax, which causes the property to be ignored.
• Expecting the timing function to affect non-transitioned properties.

Always pair transition-timing-function with transition-property and transition-duration for visible results.

css

/* Wrong: missing duration and property */
.box {
  transition-timing-function: ease-in-out;
}

/* Right: all needed properties set */
.box {
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

Quick Reference

Timing Function	Description
ease	Starts slow, speeds up, then slows down (default)
linear	Same speed from start to end
ease-in	Starts slow and speeds up
ease-out	Starts fast and slows down
ease-in-out	Slow start and end, faster middle
cubic-bezier(x1, y1, x2, y2)	Custom speed curve defined by control points

Key Takeaways

Set transition-timing-function to control how a CSS transition progresses over time.

Always use it with transition-property and transition-duration for visible effects.

Use predefined keywords for common easing or cubic-bezier for custom curves.

Invalid or missing values can cause the timing function to be ignored.

Experiment with cubic-bezier to create unique animation feels.