Hover on a box to see effect.

Single Transistions

Width

.demobox{
  transition: width 1s;
}
.demobox:hover {
    width: 200px;
}

Background Color

.demobox{
  transition: background 1s;
}
.demobox:hover {
    background: red;
}

This can be used for most CSS properties.

Multiple Transistions

.ex3{
    border: 1px solid black;
    transition: border 1s, background .25s, transform 2s;
    /*transition: all 0.3s;*/ /*This is another option*/
}
.ex3:hover {
    border: 10px dashed green;
    transform: rotate(360deg);
    background: yellow;
}

All Transistions

transition: all 0.3s ease-out;

Basic Easing

ease Default. Slow start, then fast, then slow end. linear Same speed from start to end. ease-in Slow start. ease-out Slow end. ease-in-out Slow start and slow end. *Note More advanced options are available with steps and cubic-bezier.

transition-timing-function: linear;

<!-- shortcut-->
transition: all 0.3s linear;