transitionTimingFunction Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transitionTimingFunction


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

Property Values

ease Default value. A slow start, then fast, then end slowly, same as cubic-bezier(0.25, 0.1, 0.25, 1)
linear same speed from start to end, same as cubic-bezier(0, 0, 1, 1)
ease-in slow start
ease-out slow end
ease-in-out slow start and end
cubic-bezier(n, n, n, n) Define your own values in the cubic-bezier function. n is numeric values from 0 to 1
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: ease
Return Value: A String, representing the transition-timing-function property of an element
CSS VersionCSS3

Change the speed curve of a transition effect:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
#myDIV {// www . j a  v a  2  s. com
    border: 1px solid red;
    background-color: #EEE;
    width: 200px;
    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;

<button onclick="myFunction()">Test</button>

<div id="myDIV">

function myFunction() {
    document.getElementById("myDIV").style.WebkitTransitionTimingFunction = "linear"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transitionTimingFunction = "linear";       // Standard syntax

Related Tutorials