Переход цвета при наведении мыши

.color-change { 
    background-color: red; 
    transition: background-color 0.5s linear; /* Standard */ 
    -o-transition: background-color 0.5s linear; /* Opera<12.1 */ 
    -ms-transition: background-color 0.5s linear; /* IE<10 */ 
    -moz-transition: background-color 0.5s linear; /* Firefox<16 */ 
    -webkit-transition: background-color 0.5s linear; /* Chrome<26, Safari<6.1 */ 
} 
 
.color-change:hover { 
    background-color: blue; 
} 
 
#example { 
    width: 100px; 
    height: 100px; 
}

<div id="example" class="color-change"></div>