.linear linear
.ease ease
.ease-in ease-in
.ease-out ease-out
.ease-in-out ease-in-out
.cubic-bezier cubic-bezier
.steps steps
View Compiled
.ease {
  transition: background 1s ease;
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transition: background 1s ease;
}
.ease-in {
  transition: background 1s ease-in;
  -webkit-transition: background 1s ease-in;
  -moz-transition: background 1s ease-in;
  -o-transition: background 1s ease-in;
}
.ease-out {
  transition: background 1s ease-out;
  -webkit-transition: background 1s ease-out;
  -moz-transition: background 1s ease-out;
  -o-transition: background 1s ease-out;
}
.ease-in-out {
  transition: background 1s ease-in-out;
  -webkit-transition: background 1s ease-in-out;
  -moz-transition: background 1s ease-in-out;
  -o-transition: background 1s ease-in-out;
}
.linear {
  transition: background 1s linear;
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  -o-transition: background 1s linear;
}
.cubic-bezier{
  transition: background 1s cubic-bezier(0.1, 0.7, 1.0, 0.1);
  -webkit-transition: background 1s cubic-bezier(0.1, 0.7, 1.0, 0.1);
  -moz-transition: background 1s cubic-bezier(0.1, 0.7, 1.0, 0.1);
  -o-transition: background 1s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
.steps{
  transition: background 1s steps(2, end);
  -webkit-transition: background 1s steps(2, end);
  -moz-transition: background 1s steps(2, end);
  -o-transition: background 1s steps(2, end);
}

div{  
  background: #e66c47;
  width:75px;
  height:75px;
  border-radius:40px;
  float:left;
  margin:10px;
  text-align:center;
  font:11px/75px Tahoma;
  color:white;
  text-shadow:1px 1px 3px black;
}

div:hover{
  background: grey;
}

.adobewordpress

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.