<h2>Linear</h2>
<div class="linear">Hover over me</div>
<hr>

<h2>Ease</h2>
<div class="ease">Hover over me</div>
<hr>

<h2>Ease in</h2>
<div class="ease-in">Hover over me</div>
<hr>

<h2>Ease out</h2>
<div class="ease-out">Hover over me</div>
<hr>

<h2>Ease in out</h2>
<div class="ease-in-out">Hover over me</div>
<hr>

<h2>Step start</h2>
<div class="step-start">Hover over me</div>
<hr>

<h2>Step end</h2>
<div class="step-end">Hover over me</div>
div {
  padding: 10px;
  margin: auto;
  border: 2px solid darkviolet;
  border-radius: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  color: darkviolet;
  width: 200px;

  transition-property: width, color, background-color;
  transition-duration: 2s;
}

div:hover {
  color: white;
  background-color: darkviolet;
  width: 400px;
}

.linear {
  transition-timing-function: linear;
}

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

.ease-in {
  transition-timing-function: ease-in;
}

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

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

.step-start {
  transition-timing-function: step-start;
}

.step-end {
  transition-timing-function: step-end;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.