Как плавно менять бэкграунд дива?

Question

[Юра]

Привет, кто подскажет как сделать плавную смену с полупрозрачностью бэкграунда дива, можно ли это сделать на чистом CSS, что для этого нужно?

На данный момент есть body, внутри div class="images" внутри которого уже всё остальное содержимое, как в div class="images" сделать плавную смену двух картинок, может для этого нужен ещё один вложенный див например class="images2" и поочерёдно включать/выключать их?

Answer 1

[Stalker_RED]

Добавляем псевдоэлемент с другим изображением и меняем ему прозрачность.
Для плавности - transition. Для автоповтора:
animation: foo 5s infinite;

https://jsfiddle.net/wpavqpbs/

Comments

[Юра]

да, но получается только через hover, а что бы самостоятельно менялось скажем каждые 5 или 10 секунд?

[fajiz]

Юра: в CSS можно анимировать только цифровые значения. Только JS.

[fajiz]

Хотя можно с opacity поигратся у картинок, но мне лень. Т.е. зациклить animation на opacity для каждого дива. Думаю можно сделать.

[Stalker_RED]

Юра: так надо было сразу указывать что вам нужно автоматом.
Обновил ответ.

[Юра]

Спасибо, очень интересно

Answer 2

[Макс]

Можно так поизвращаться)
https://codepen.io/anon/pen/XRYmVx

Answer 3

[Stopy]

Видимо никто не в курсе, но если диву дать transition: *s; а потом через js поменять параметр background-image, то он картинку плавно и поменяет. Только это обязательно должно происходить по событию, т.к. на onload (onready) изображение замениться моментально