[danik.js]

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 на них не работает в старых браузерах) можно использовать элементы. В любом случае, работать должно во всех браузерах, включая хром, так что смысла городить отдельные страницы и определять браузер вообще нет.