CSS transition-timing-function Property

You are Here:


Try to hover the outer Div

Hover Me


CSS transition-timing-function Property

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


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>


Using CSS

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

Using Javascript



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.

linearSpecifies 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).
easeSpecifies 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-inSpecifies 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-outSpecifies that the transition starts quickly, slowing down the transition continues. It is equal to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-outSpecifies 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.


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>


Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author