CSS transition-timing-function Property

CSS transition-timing-function property specifies the speed curve of a transition, which describes how the transition will proceed over one cycle of its duration. This curve is defined using an inbuilt function called the timing function.

For example, a linear timing function specifies that the speed of the transition will remain constant over its once cycle of duration. While an ease function specifies that the speed of the transition will grow slowly at starting, then fast, and then slow again at the end.

Hover over the elements below to see the transition effect.

Hover Over Me!!!
Hover Over Me!!!

Try out the example below for a clear understanding:

Example:

.div1{
  transition-timing-function: linear;
  transition-property: width;
}
.div2{
  transition-timing-function: steps(6, end);
  transition-property: width;
}

CSS Syntax

The transition-timing-function property has the following syntax:

transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|steps(n,start|end)|step-start|step-end|cubic-bezier(n,n,n,n)|initial|inherit;

Property Values

The transition-timing-function property accepts several inbuilt timing functions as a value. These timing functions are listed below:

easeThis is the default value. It specifies that the transition will start slowly, then fast, and then again slow at the end. Same as cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-inSpecifies that the speed of transition will be slow at starting and will gradually increase until the end. It is same as cubic-bezier(0.42, 0, 1.0, 1.0)
ease-outSpecifies that the transition will start quickly and will keep on slowing down until it completes. It is same as cubic-bezier(0, 0, 0.58, 1.0)
ease-in-outSpecifies that the transition has a slow start, then fast, and then slow again until completes. It is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
linearSpecifies that the speed of the transition will be constant during the entire cycle of the transition. It is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
steps(n,start|end)It accepts two parameters, first, the number of total steps in one cycle. The second parameter is optional. It specifies the point at which the change of values occurs within the interval. If it is omitted, it sets to “end”.
step-startSame as steps(1, start).
step-endSame as steps(1, end).
cubic-bezier(n,n,n,n)This function lets you define any timing function you want. It accepts four values each in the range of 0 to 1. For example, if you want to make a function same as ease ,you can use cubic-bezier(0.25, 0.1, 0.25, 1.0).
initialSets the transition-timing-function property to its default value(ease).
inheritInherits the transition-timing-function property from its parent element.

General Info

Default Valueease
InheritedNo
JavaScript Usageelement.style.transitionTimingFunction= “steps(6,end)”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment