CSS Property transition-timing-function








The transition-timing-function property defines a function that describes how a transition will proceed over its duration. 

.example {
    transition-timing-function: ease-out;
}

Summary

Initial value
ease
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.transitionTimingFunction="linear"
Animatable
no

CSS Syntax

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier();

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.




Browser compatibility

transition-timing-function Yes 10.0 Yes Yes Yes

Example

<!--   w  w w.  jav  a  2  s  . co  m-->
<!DOCTYPE html>
<html>
<style>
.box {
  -webkit-transition-timing-function: steps(4, start);
  -moz-transition-timing-function: steps(4, start);
  -o-transition-timing-function: steps(4, start);
  transition-timing-function: steps(4, start);
}

.box-2 {
  -webkit-transition-timing-function: steps(4, end);
  -moz-transition-timing-function: steps(4, end);
  -o-transition-timing-function: steps(4, end);
  transition-timing-function: steps(4, end);
}

.box:hover, .box-2:hover {
  background-color: lightblue;
  cursor: pointer;
}

.uni {
  box-sizing: border-box;
  float: left;
  border: solid 1px black;
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: 2px;
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}

.wrap {
  width: 304px;
  overflow: hidden;
  margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
  <div class="box uni"></div>
  <div class="box-2 uni"></div>
</div>
</body>
</html>

Click to view the demo





Example 2

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--  w w w .j av  a2  s  .c  o  m-->
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    font-weight: bold;
   -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Standard syntax */
#div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>

<p>Hover over the div elements above, to see the different transition effects.</p>

</body>
</html>

Click to view the demo