CSS transition-timing-function Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

Try to hover the outer Div

Hover Me

linear

ease

ease-in

ease-out

ease-in-out

custom

CSS transition-timing-function Property

CSS transition-timing-function property specifies the speed curve of the transition effect.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerdiv{ width: 100%; border: 1px solid #267326; padding: 10px; margin-bottom: 50px; text-align: center; display: flex; flex-direction: column; position: relative; } #outerDiv > div{ position: relative; margin: 10px; height: 95px; background-color: teal; width: 95px; color: #fff; line-height: 5; border: 1px solid #004d4d; left: 1%; -webkit-transition-property: left; /* Safari */ -webkit-transition-duration: 2s; /* Safari */ transition-property: left; transition-duration: 2s; } #outerDiv:hover > div{ left: 80%; } #point{ transition-timing-function: linear; -webkit-transition-timing-function: linear; /* Safari */ } #point1{ transition-timing-function: ease; -webkit-transition-timing-function: ease; /* Safari */ } #point2{ transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; /* Safari */ } #point3{ transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; /* Safari */ } #point4{ transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; /* Safari */ } #point5{ transition-timing-function: steps(2, jump-both); -webkit-transition-timing-function: steps(2, jump-both); /* Safari */ } #point6{ transition-timing-function: cubic-bezier(0.83, 2.3, 0.31, 0.46); -webkit-transition-timing-function: cubic-bezier(0.83, 2.3, 0.31, 0.46); /* Safari */ } </style> </head> <body> <h1>CSS transition-timing-function Property</h1> <div id="outerDiv"> <p>Hover Me</p> <div id="point">linear</div> <div id="point1">ease</div> <div id="point2">ease-in</div> <div id="point3">ease-out</div> <div id="point4">ease-in-out</div> <div id="point5">Div</div> <div id="point6">custom</div> </div> </body> </html>

Run

Syntax

Using CSS

element{ transition-timing-function: ease-in; }

Using Javascript

object.style.transitionTimingFunction="ease-in";

Animatable

No, transition-timing-function property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS transition-timing-function property is ease.

Property Value

The following table provides a list of values for CSS transition-timing-function property.

Value	Explanation
linear	Specifies that the transition has the same speed from start to end. It is equal to cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease	Specifies that the transition has a slow start, then fast, before it ends slowly. It is equal to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in	Specifies that the transition starts off slowly, with the speed of the transition will increase until complete. It is equal to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out	Specifies that the transition starts quickly, slowing down the transition continues. It is equal to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out	Specifies a transition effect with a slow start and end. It is equal to cubic-bezier(0.42, 0, 0.58, 1.0).
steps(n, <option>)	Specifies that the transition iteration along n stops along the transition, displaying each stop for equal lengths of time. Possible values for option are: jump-start: Specifies a left-continuous function, so that the first jump happens when the transition begins. jump-end: Specifies a right-continuous function, so that the last jump happens when the transition ends. jump-none: Specifies that there is no jump on either end. jump-both: Specifies that it includes pauses at both the 0% and 100% marks, effectively adding a step during the transition iteration. start: Same as jump-start. end: Same as jump-end.
cubic-bezier(n,n,n,n)	Specifies your own values in the cubic-bezier function Possible values are numeric values from 0 to 1.

Using JavaScript

In the following example, we will demonstrate how to change the CSS transition-timing-function property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> #outerDiv p{ width: 100%; text-align: center; } #outerdiv{ width: 100%; height: 150px; border: 1px solid #267326; padding: 10px; margin-bottom: 25px; display: flex; position: relative; text-align: center; } #innerdiv{ width: 80px; height: 80px; background-color: teal; color: #fff; line-height: 4; border: 1px solid #004d4d; position: absolute; top: 5%; left: 1%; transition: left 1s; -webkit-transition: left 1s } #outerDiv:hover > #innerdiv{ left: 85%; } </style> </head> <body> <h1>CSS transition-timing-function Property</h1> <div id="outerDiv"> <p>Hover Me</p> <div id="innerDiv">Div</div> </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementById("innerDiv"); function myFunction(){ x.style.transitionTimingFunction = "cubic-bezier(0.83, 2.3, 0.31, 0.46)"; x.style.WebkitTransitionTimingFunction = "cubic-bezier(0.83, 2.3, 0.31, 0.46)"; } </script> </body> </html>

Run