Переход между фоновыми изображениями, который работает одинаково во всех современных браузерах?

Question

Я пытаюсь добавить фоновые изображения с помощью CSS.

Я использую CSS transitions для этой цели.

-webkit-transition: all 0.9s ease-in-out 0s;
  -moz-transition: all 0.9s ease-in-out 0s;
  -ms-transition: all 0.9s ease-in-out 0s;
  -o-transition: all 0.9s ease-in-out 0s;
  transition: all 0.9s ease-in-out 0s;

Приведенный выше код работает нормальнов Chrome, но он совсем не работает в Firefox!

РАБОЧАЯ СКИДКА

Нажмите на 'Apple' текст для просмотра перехода в chrome.

Может кто-нибудь посоветуете совет по этому вопросу?

Answer 1

Вы можете рассмотреть псевдоэлемент, чтобы создать другой слой, тогда вы можете использовать opacity для затухания:

$('.box').click(function() {
  $(this).toggleClass('animate');
});

.box {
  margin: 10px;
  width: 200px;
  height: 200px;
  background: url(https://picsum.photos/200/300?image=1069);
  position: relative;
  z-index: 0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.box:before {
  background: url(https://picsum.photos/200/300?image=1045);
  transition: 0.5s;
}

.box:after {
  background: url(https://picsum.photos/200/300?image=1049);
  transition: 0.5s 0.5s;
}

.box.animate::before {
  opacity: 0;
  transition: 0.5s 0.5s;
}
.box.animate::after {
  opacity: 0;
  transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">

</div>

А если вам нужна другая анимация, вы можете играть с background-size и несколькими фонами:

.box {
  margin: 10px;
  width: 200px;
  height: 200px;
  background-image: 
    url(https://picsum.photos/200/200?image=1069),
    url(https://picsum.photos/200/200?image=1045),
    url(https://picsum.photos/200/200?image=1049),
    url(https://picsum.photos/200/200?image=1051);
 background-size:100% 100%;
 background-position:center;
 background-repeat:no-repeat;
}
.box:hover {
  animation:change 2s linear forwards;
}
@keyframes change {
  0%  {background-size:100% 100%,100% 100%,100% 100%,100% 100%;}
  25% {background-size:0    0   ,100% 100%,100% 100%,100% 100%;}
  50% {background-size:0    0   ,0    0   ,100% 100%,100% 100%;}
  75% {background-size:0    0   ,0    0   ,0    0   ,100% 100%;}
  100%{background-size:0    0   ,0    0   ,0    0   ,0    0;}
}

<div class="box">

</div>

Вы также можете настроить background-position, чтобы создать другой способ перехода:

.box {
  margin: 10px;
  width: 200px;
  height: 200px;
  background-image: 
    url(https://picsum.photos/200/200?image=1069),
    url(https://picsum.photos/200/200?image=1045),
    url(https://picsum.photos/200/200?image=1049),
    url(https://picsum.photos/200/200?image=1051);
 background-size:100% 100%;
 background-position:left;
 background-repeat:no-repeat;
}
.box:hover {
  animation:change 2s linear forwards;
}
@keyframes change {
  0%  {background-size:100% 100%,100% 100%,100% 100%,100% 100%;}
  25% {background-size:0    100%,100% 100%,100% 100%,100% 100%;}
  50% {background-size:0    100%,0    100%,100% 100%,100% 100%;}
  75% {background-size:0    100%,0    100%,0    100%,100% 100%;}
  100%{background-size:0    100%,0    100%,0    100%,0    100%;}
}

<div class="box">

</div>