2

Создана простенькая карусель на css, на нижние изображения по умолчанию установлено свойство filter:blur(3px), когда элемент становится на первый план, blur устанавливается в "0", при этом элемент пропадает на мгновение и сразу появляется. Как исправить этот баг?

body {
  height: 100vh;
  display: flex;
  background-color: #f34;
}

.slider_container {
  margin: auto;
  width: 50%;
  height: 60%;
  background: #6ce555;
  display: flex;
  justify-content: center;
}

.slider_container div {
  margin: auto 0;
  text-align: center;
}

.slide_img {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.first_el {
  width: 25%;
  height: 75%;
  filter: blur(3px);
  transition: filter 2s linear;
  background: #f55cad;
  transform: translateX(25%);
  animation: bottom-from-l-to-r 5s linear infinite;
}

.second_el {
  width: 25%;
  height: 75%;
  transform: scale(1.2);
  background: #f50cad;
  z-index: 2;
  animation: from-r-to-l 5s linear infinite;
}

.third_el {
  width: 25%;
  height: 75%;
  background: #f57cad;
  /*   filter:blur(3px); */
  transform: translateX(-25%);
  animation: from-l-to-r 5s linear infinite;
}


/* animation for first element */

@keyframes bottom-from-l-to-r {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(175%);
    z-index: 1;
  }
  50% {
    transform: translateX(100%) scale(1.2);
    z-index: 2;
    filter: blur(0px);
  }
  99% {
    z-index: 2;
  }
  100% {
    transform: translateX(0%);
    z-index: 0;
  }
}


/*  animation for second element*/

@keyframes from-r-to-l {
  0% {
    transform: translateX(0) scale(1.2);
    z-index: 2;
  }
  25% {
    transform: translateX(-75%);
    z-index: 0;
  }
  50% {
    transform: translateX(75%);
    z-index: 1;
  }
  100% {
    transform: translateX(0) scale(1.2);
    z-index: 2;
  }
}


/*  animation for third element*/

@keyframes from-l-to-r {
  0% {
    transform: translateX(0);
    z-index: 1;
  }
  25% {
    transform: translateX(-100%) scale(1.2);
    z-index: 2;
  }
  50% {
    transform: translateX(-175%);
    z-index: 0;
  }
  100% {
    transform: translateX(0);
    z-index: 1;
  }
}
<div class="slider_container">
  <div class="first_el">
    <img src="http://revelstokeartscouncil.com/wordpress/wp-content/uploads/2011/12/Bear.jpg" alt="" class="slide_img" />
  </div>
  <div class="second_el">
    <img src="http://static.metacritic.com/images/products/movies/7/9c446be45735ae7dcfb3ff1a3a78ebac.jpg" alt="" class="slide_img" />
  </div>
  <div class="third_el">
    <img src="https://images-na.ssl-images-amazon.com/images/I/51o33fuVLpL.jpg" alt="" class="slide_img" />
  </div>
</div>

просмотреть визуализацию и код можно по ссылке codepen.io.

7
  • чего-то не видно этой проблемы...
    – Air
    28 апр 2018 в 17:52
  • в хроме открой я не прописывал префиксы
    – Evgeniy R
    28 апр 2018 в 17:55
  • У меня опера. это одно и тоже
    – Air
    28 апр 2018 в 17:55
  • и что блур работает нормально?
    – Evgeniy R
    28 апр 2018 в 17:56
  • У меня блюриться только медведь... Но ничего не пропадает
    – Air
    28 апр 2018 в 18:06

1 ответ 1

0

Предположительно проблема в аппаратном ускорении браузера CHROME. В Огненной Лисе blure(Xpx) отрабатывает нормально. В Chrom - через раз, в зависимости от загрузки процессора

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.