CSS3 Transitions

CSS3 Transitions allows us to change the value of another CSS property from one value to another over a specified duration of time.

The transition property takes below format:

.myClass { 
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay] 
}

For example, to have the background color property value of a div transitioned from its original value to a new value, we can have something like below:

.myClass {
  background-color: #eeeeee;
  transition-property: background-color 10s ease 1s;
  &:hover{
    background-color: #ff9900;
  }
}

Above is short-hand for specifying below 4 transition related properties:

.myClass {
  transition-property: background-color; 
  transition-duration: 10s; 
  transition-timing-function: ease; 
  transition-delay: 1s;
}

JSFiddle