<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">1:linear</div><br>
<div id="div2">2:ease</div><br>
<div id="div3">3:ease-in</div><br>
<div id="div4">4:ease-out</div><br>
<div id="div5">5:ease-in-out</div><br>
<div id="div6">6:delay</div><br>

div {
  width: 90px;
  height: 20px;
  background: red;
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}
h1{font-size:15px}
p{font-size:13px}
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}

#div6 { 
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s; 
}
div7 {
-webkit-transition: width 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, transform 2s;
    -webkit-transform: rotate(10deg); /* Safari */
  transform: rotate(180deg);
}
/* Standard syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
#div6 { 
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s; 
}

div:hover {
  width: 180px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.