transitionTimingFunction Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:transitionTimingFunction

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. transitionTimingFunction

Description

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

Property Values

ValueDescription
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>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

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

<div id="myDIV">
  <h1>myDIV</h1>
</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>

Related Tutorials