Javascript Reference - HTML DOM Style transitionTimingFunction Property

The transitionTimingFunction property gets and sets the speed curve of the transition effect.

Browser Support


`transitionTimingFunction`	Yes	10	Yes	Yes (WebkitTransitionTimingFunction)	Yes

Syntax

Return the transitionTimingFunction property:

var v = object.style.transitionTimingFunction

Set the transitionTimingFunction property:

object.style.transitionTimingFunction ='ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit'

Property Values

ease: Default value. a slow start, then fast, then end slowly. Equivalent to cubic-bezier(0.25,0.1,0.25,1).
linear: same speed from start to end. Equivalent to cubic-bezier(0,0,1,1).
ease-in: slow start. Equivalent to cubic-bezier(0.42,0,1,1).
ease-out: a slow end. Equivalent to cubic-bezier(0,0,0.58,1).
ease-in-out: a slow start and end. Equivalent to cubic-bezier(0.42,0,0.58,1).
cubic-bezier(n,n,n,n): Define your own cubic-bezier function. Possible values are numeric values from 0 to 1.

Technical Details

Default Value:	ease
Return Value:	A string representing the transition-timing-function property
CSS Version	CSS3

Example

The following code shows how to change the speed curve of a transition effect.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- w  w w  .  j a va2  s . c  om-->
    border: 1px solid black;
    background-color: lightblue;
    width: 270px;
    height: 200px;
    overflow: auto;
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}

#myDIV:hover {
    background-color: coral;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">hover me</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.WebkitTransitionTimingFunction = "linear"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transitionTimingFunction = "linear";       // Standard syntax
}
</script>
</body>
</html>

The code above is rendered as follows: