Перекрестный поход между изображениями с CSS в петле без «исчезновения до черного» в ключевых кадрахCSS

Разбираемся в CSS
Ответить
Anonymous
 Перекрестный поход между изображениями с CSS в петле без «исчезновения до черного» в ключевых кадрах

Сообщение Anonymous »

Я хотел бы переходить между несколькими изображениями только с помощью CSS, а затем пройти через эту анимацию на неопределенный срок. Я использовал методологию, предоставленную Заком Уайтом в этом вопросе, которая простирается между изображениями, но после первого цикла через всю анимацию существует «частичное исчезновение до черного» между каждым изображением. от одного до следующего? Essentially, I want the new image to "fade in" on top of the previous image, and then loop indefinitely through all the images.
Fiddle here with the CSS and HTML shown below: https://jsfiddle.net/xg0Lsa6f/

Код: Выделить всё

.fader5 {
position: relative !important;
background: black;
}
.fader5 img {
position: absolute !important;
left: 0;
top: 0;
-webkit-animation: fader5fade 10s infinite;
animation: fader5fade 10s infinite;
}
@keyframes fader5fade {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fader5 img:nth-of-type(5) {
animation-delay: 0s;
}
.fader5 img:nth-of-type(4) {
animation-delay: 2s;
}
.fader5 img:nth-of-type(3) {
animation-delay: 4s;
}
.fader5 img:nth-of-type(2) {
animation-delay: 6s;
}
.fader5 img:nth-of-type(1) {
animation-delay: 8s;
position: relative !important;
}< /code>

[img]https://live.staticflickr.com/65535/54578463678_c27eb53860_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54578567065_025ae037e7_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54578417269_740e2f5846_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54578463698_eccddf3374_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54577373532_f92b4ab806_n.jpg[/img]

The first time through the images seem to transition smoothly from one to the next; subsequent times through, they seeme to "fade through black." How do I make them transition smoothly, "stacking" on each other, rather than fading through black/the background color?



Подробнее здесь: https://stackoverflow.com/questions/796 ... t-keyframe
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»