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: