<h1>CSS Transition Timing Functions</h1>
<ul>
  <li><a href="" id="ease">ease</a></li>
  <li><a href="" id="linear">linear</a></li>
  <li><a href="" id="ease-in"><code>ease-in</code></a></li>
  <li><a href="" id="ease-out"><code>ease-out</code></a></li>
  <li><a href="" id="ease-in-out"><code>ease-in-out</code></a></li>
  <li><a href="" id="cubic-bezier"><code>cubic-bezier(0.5,0.5,0,1)</code></a></li>
  <li><a href="" id="cubic-bezier2"><code>cubic-bezier(0.5,1,0.5,-0.25)</code></a></li>
</ul>
* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 1.5em;
  font-family: monospace;
  text-align: center;
}

h1 {
  margin-top: 0.5em;
  color: #000;
}

li {
  list-style: none;
  margin: 15px 0;
  background: yellow;
}

li a { 
  display: block;
  width: 300px;
  padding: 20px 0;
  background: pink;
  color: black;
}

#ease {
  transition: 3s;
}

#linear {
  transition: 3s linear;
}

#ease-in {
  transition: 3s ease-in;
}

#ease-out {
  transition: 3s ease-out;
}

#ease-in-out {
  transition: 3s ease-in-out;
}

#cubic-bezier {
  transition: 3s cubic-bezier(0.5,0.5,0,1);
}

#cubic-bezier2 {
  transition: 3s cubic-bezier(0.5,1,0.5,-0.25);
}

li a:hover {
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.