CSS3 transition-timing-function Property

Browser Support

The numbers in the table indicate the first browser version number that supports the property.

The number immediately before -webkit-, -ms-, or -moz- is the first browser version number that supports the prefixed property.

Property Definition and Usage Instructions

transition-timing-function is a CSS3 property used to specify the timing function of a transition effect. It defines how the transition effect changes over time and controls the speed curve of the transition, thereby affecting the animation effect during the element's transition from start to end.

The value of this property can be one of the following predefined timing functions:

• ease: Default value, a transition effect that accelerates slowly and then decelerates slowly.
• linear: Uniform transition effect.
• ease-in: Slowly accelerating transition effect.
• ease-out: Slowly decelerating transition effect.
• ease-in-out: A transition effect that first accelerates slowly and then decelerates slowly.
• cubic-bezier(n,n,n,n): A custom Bezier curve function, which defines the control points of the curve through four values, corresponding respectively tox1、y1、x2、y2。

For example, if you want the transition effect to have a slow acceleration and then a slow deceleration, you can write it like this:

.element {
  transition-timing-function: ease;
<p>}

.element {
  transition-timing-function: linear;
}

You can also use a custom Bezier curve function to achieve more refined transition effects. For example:

.element {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

This creates a custom effect of slow acceleration and slow deceleration. You can adjust the four values to adjust the shape of the curve to achieve a specific transition effect.

By adjusting the transition-timing-function property, you can control the speed and animation effect of the transition, making your interface interaction more vivid and engaging.

Syntax

More Examples