Как сделать плавный слайдшоу для firefox (или не работает transition на background-image, как заменить?)?

Question

[­]

Пытаюсь сделать автоматический слайдшоу. Есть div, который имеет стиль background-image и с интервалом там меняется url ссылка на картинку. Поставил transition, но оно не работает в Firefox, зато в Google Chrome анимация работает.
Порывшись в интернете, выяснил, что background-image не анимируется. Как быть?
p.s. код скинуть не могу, так как я его переделал, пытаясь сделать иным способом. и пока что безуспешно.
p.s.s есть мысль, вывести сразу все изображения с помощью метода .map() и устанавливать opacity: 1 только для текущей картинки. получается все картинки прозрачные, и одна нет. Но это дерьмово, ибо вдруг изображений будет под 50 штук? Или 100? Вывести их все сразу... ну такое себе.

p.s.s.s ещё styled-components использую, в тегах нет его, почему-то

Answer 1

[Антон Спирин]

Рендерите два изображения и используйте opacity. Скрытому меняйте url на следующее в списке.

Comments

[­]

Хорошая идея, спасибо! Завтра опробую.

Answer 2

[Stalker_RED]

Comments

[­]

Хорошо, вот Вы в ручную прописали 5 изображений. И написали для их анимации гору кода. А что если придётся усложнить? Например, для каждого времени суток (утро день вечер ночь), выводить определённые картинки, и их будет не 5, а 55. Все 55 штук вручную прописывать?

[Stalker_RED]

­,
За саму анимацию отвечает одна строка:

img.fade { opacity: 0; transition: opacity 1.7s ease; }

В каком смысле "вручную прописывать"?