ЦЕЛЬ

Получить более плавный переход между изображениями. На данный момент у меня белый фон между изображениями на несколько миллисекунд.

ПРОБЛЕМА

Очевидно, я не могу правильно воспроизвести эту часть своего кода, так как не думаю, что вы можете использовать ссылки в background-image: url (…) . В моем реальном коде я использую относительные пути.

Проблема заключается в белом фоне между переходами изображений при первой загрузке, которые не сохраняются в кэше. При повторном запуске ползунка переход более плавный, т.е. белый фон не отображается.

РЕЗЮМЕ

Я хотел бы получить более плавный переход между изображениями, когда они впервые загружаются и не сохраняются в кеше. Как это могло быть сделано? (jQuery также приветствуется)

h1 { display: flex; justify-content: center; margin: 20vh 0; background-color: lightblue; padding: 50px; } @keyframes slide { 0% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25.01% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50.1% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress{amp}amp;cs=tinysrgb{amp}amp;dpr=1{amp}amp;w=500"); } 75% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress{amp}amp;cs=tinysrgb{amp}amp;dpr=1{amp}amp;w=500"); } 75.1% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } 100% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } } .slider { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); background-size: cover; background-repeat: no-repeat; background-position: center; animation: slide 30s infinite; } .load { animation: slide 2s; } 
  {amp}lt;div class="slider"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="load"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;h1{amp}gt;SOME CONTENT{amp}lt;/h1{amp}gt; 

ОБНОВИТЬ

Изображения теперь отображаются как {amp}lt;div class="slider"{amp}gt;{amp}lt;/div{amp}gt; ранее отсутствовал. На это было указано в первом ответе ниже. Тем не менее, белый фон между изображениями все еще там.

Ваш слайдер и div загрузки не показывались, потому что в них не было ничего для начала и не указана высота по умолчанию в css. Я дал слайдеру высоту 30vh и ширину 100% (я использовал его для демонстрационных целей). Я уменьшил поля / отступы вокруг h1 (их много!), Чтобы вы могли лучше видеть изображения во фрагменте. Еще бы можно было посмотреть лучше на весь экран.

Я добавил время анимации (облегчение вывода) в CSS, чтобы замедлить начало и конец анимации, чтобы переход казался немного более простым для глаз. По умолчанию легкость, которая делает его быстрым в середине; изменяя скорость перехода, ваша анимация может выглядеть немного плавнее.

Надеюсь это поможет

  h1 { display: flex; justify-content: center; margin: 2vh 0; background-color: lightblue; padding: 15px; } @keyframes slide { 0% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25.01% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50.1% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress{amp}amp;cs=tinysrgb{amp}amp;dpr=1{amp}amp;w=500"); } 75% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress{amp}amp;cs=tinysrgb{amp}amp;dpr=1{amp}amp;w=500"); } 75.1% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } 100% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } } .slider { display:inline-block; background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); background-size: cover; background-repeat: no-repeat; background-position: center; animation: slide 5s ease-in-out infinite; height:30vh; width:100%; } .load { animation: slide 5s infinite; } 
 {amp}lt;h1{amp}gt;SOME CONTENT{amp}lt;/h1{amp}gt; {amp}lt;div class="slider"{amp}gt;{amp}lt;/div{amp}gt;