[kotamirov]

css3:
transition: background-color 0.5s;

либо анимируй на js (хуже производительность, но лучше поддержка браузерами), используя requestAnimationFrame. Писать с нуля не советую. Лучше воспользуйся какой-нибудь готовой либой.

не 0.5s ,а .5s!
+ анимировать на css можно, затрат ресурсных меньше,
все что можно сделать на css лучше делать на css!
вот пример background loading:

/*part for loading processing*/
.loading_processing{
width:224px;
height:100px;
top:35%;
margin:0 auto 0 auto;
background:url('__BASE_URL__/i/loading_processing.png') no-repeat 0 0;
background-size: contain;
}
.loading_processing>div{
width:98px;
height:98px;
float:left;
background:url('__BASE_URL__/i/left_part_loading_processing.png') no-repeat 0 0;
background-size: cover;
-webkit-animation:go_loading_processing 2s cubic-bezier(0, 0, 1, 1) infinite;
-o-animation:go_loading_processing 2s cubic-bezier(0, 0, 1, 1) infinite;
-moz-animation:go_loading_processing 2s cubic-bezier(0, 0, 1, 1) infinite;
}
@-webkit-keyframes go_loading_processing{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes go_loading_processing{
0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}
}
@-0-keyframes go_loading_processing{
0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}
}
/*part for loading processing END*/