Изображения не размываются при переходе через CSS

Моя конкретная проблема заключается в том, что изображения внезапно исчезают до перехода следующего изображения во время переключения изображения в стиле слайд-шоу.

В целом слайд-шоу работает нормально, только то, что внезапное исчезновение каждого изображения до того, как исчезнет следующее изображение, довольно сбивает с толку.

Я новичок и у меня нет опыта работы с JQuery, поэтому мне интересно, следует ли мне использовать что-то отличное от анимации webkit.

HTML:

<div class = "pimgSlideshow"; style = "max-width:500px">
<img class = "mySlides fade" src = "../images/pic1.jpg" style = "width:100%">
<img class = "mySlides fade" src = "../images/pic2.jpg" style = "width:100%">
<img class = "mySlides fade" src = "../images/pic3.jpg" style = "width:100%">
</div>

CSS:

.mySlides {display:none;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

JS:

var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}    
x[myIndex-1].style.display = "block";  
setTimeout(carousel, 5000);
}

х [я] .style.display = "нет"; заставляет изображение исчезать немедленно. Вы должны создать классы fadeIn и fadeOut и при необходимости применить их к нужному изображению, анимируя непрозрачность.

— 29.08.2018 23:06

html css image animation webkit

29.08.2018 22:10

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо использования CSS-анимации лучше использовать переход CSS, заменив display: none; в javascript с opacity = "0" и opacity = "1" соответственно.

Кроме того, при абсолютном позиционировании изображений они будут казаться друг на друге по мере того, как они появляются и исчезают.

Обновленный JS:

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.opacity = "1";  
    setTimeout(carousel, 5000);
}

CSS

.pimgSlideshow {
    position: relative;
}

.mySlides {
    display:block;
    transition: ease all 1s;
    position: absolute;
    left: 0;
    top: 0;
}

Посмотрите эту скрипку, чтобы продемонстрировать: http://jsfiddle.net/c8uaqk31/19/

Это отлично сработало. Смотрится намного лучше. Намного меньше раздражения. Спасибо большое.

— 30.08.2018 20:29

29.08.2018 23:20