CSS3 crossfade bg image, коли використовується обкладинка - css3, css-переходи, css-анімації

Я намагаюсь анімувати / перетнути зображення bg за допомогою CSS3. Я знаю, що це працює, але тільки зараз у Chrome:

.image {
width: 100%;
height: 100%;
background-size: cover;
transition: background-image .5s ease-in;
background-image: url(../image.jpg);
}

.image:hover {
background-image:url(../image1.jpg;
}

У Chrome це чудово працює, бездоганноперехід від одного зображення до іншого. Я знаю, що можу анімувати власне фонове розташування за допомогою ключових кадрів CSS3 та зображення спрайту, але проблема полягає в тому, що я повинен використовувати властивість обкладинки. Якщо я знаю точні розміри мого власника div, то зміна фонового положення з ключовими кадрами працює як чарівність, але при додаванні фонового розміру: обкладинка в суміші, ну, єдине, що я можу сказати, що результати не такі, як очікувалося.

Чи існує якийсь обхід для цього?

Відповіді:

Ви можете встановити друге зображення на псевдоелемент, а просто змінити непрозорість, щоб зробити ефект наведення

.test {
position: relative;
width: 450px;
height: 300px;
background-image: url(http://placekitten.com/300/200);
background-size: cover;
}


.test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(http://placekitten.com/600/400);
background-size: cover;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
opacity: 0;
}

.test:hover:after {
opacity: 1;
}

скрипка

До речі, це також крос-браузер