Полное фоновое изображение с эффектом затухания

.crossfade > div { animation: imageAnimation 30s linear infinite 0s; backface-visibility: hidden; background-size: cover; background-position: center center; color: transparent; height: 100%; left: 0px; opacity: 0; position: fixed; top: 0px; width: 100%; z-index: 0; } .crossfade { height: 500px; } #fade1{ background-image: url('../images/taxi.jpg'); } #fade2 { animation-delay: 6s; background-image: url('../images/default.jpg'); } #fade3 { animation-delay: 12s; background-image: url('../images/neuroBG.JPG'); } #fade4 { animation-delay: 18s; background-image: url('../images/new4.jpeg'); } #fade5 { animation-delay: 24s; background-image: url('../images/new3.jpg'); } #fade6 { animation-delay: 30s; background-image: url('../images/new1.jpg'); } #fade7 { animation-delay: 36s; background-image: url('../images/new2.jpeg'); }

Я хотел бы, чтобы фоновое изображение затухало и выходило так же, как этот сайт www.flitways.com

Я попытался воспроизвести это, но изображения не затухают должным образом. Я просто чувствую, что чего-то не хватает. Поблагодарите любую помощь в этом отношении. Благодарю.

Чтобы изображения постепенно исчезали, нужно рассчитать проценты и тайминги, чтобы они выглядели хорошо, как @keyframes ниже, или просто придать каждому изображению правило @keyframes .

Для «n» изображений вы должны определить:

a = время представления для одного изображения

b = продолжительность для поперечного замирания

Общая продолжительность анимации – это, конечно, t = (a + b) * n

анимация-delay = t / n или = a + b

Процент для ключевых кадров:

0%

A / T * 100%

(a + b) / t * 100% = 1 / n * 100%

100% – (б / т * 100%)

100%

Src: http://css3.bradshawenterprises.com/cfimg/

 .crossfade > div { animation: imageAnimation 8s linear infinite; backface-visibility: hidden; background-size: cover; background-position: center center; color: transparent; height: 100%; left: 0; position: fixed; top: 0; width: 100%; } .crossfade { height: 500px; } @keyframes imageAnimation { 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } } .crossfade div:nth-of-type(1) { background-image: url(http://placehold.it/200/f00); animation-delay: 6s; } .crossfade div:nth-of-type(2) { background-image: url(http://placehold.it/200/0b0); animation-delay: 4s; } .crossfade div:nth-of-type(3) { background-image: url(http://placehold.it/200/00f); animation-delay: 2s; } .crossfade div:nth-of-type(4) { background-image: url(http://placehold.it/200/ff0); animation-delay: 0; }