CSS3 Не предусматривает применение transition к background-image. Это уже инициатива хрома.
Плавную смену можно сделать так:
<style>
.example{
height: 100px;
position: relative;
}
.example:before,
.example:after{
display: block;
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 1s ease-in-out;
}
.example:before{
background: url(http://javascript.ru/forum/images/smilies/smile.gif);
}
.example:after{
background: url(http://javascript.ru/forum/images/smilies/laugh.gif);
opacity: 0;
}
.example:hover:before{
opacity: 0;
}
.example:hover:after{
opacity: 1;
}
</style>
<div class="example"></div>
Вместо псевдоэлементов (transition на них не работает в старых браузерах) можно использовать элементы. В любом случае, работать должно во всех браузерах, включая хром, так что смысла городить отдельные страницы и определять браузер вообще нет.