Transition

Possiamo applicare un semplice effetto di transizione di 2 secondi con due semplici righe di codice CSS (+ le dichiarazioni cross-browser):

div {
  width: 200px;
  height: 200px;
  background-color: 98d925#;
 
  transition-property: background-color; /*standard*/
  transition-duration: 2s;
 
  -webkit-transition-property: background-color; /*Safari e Chrome */
  -webkit-transition-duration: 2s;
         
  -o-transition-property: background-color;      /*Opera*/
  -o-transition-duration: 2s;
         
  -moz-transition-property: background-color;    /*Firefox*/
  -moz-transition-duration: 2s;
}
 
div:hover {
  background-color: #ff5c00;
}