css animation filter:blur(0) элемент пропадает — css анимация

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Загрузка...

Вопрос:


Создана простенькая карусель на 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.

Автор вопроса: Evgeniy R

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

Источник

Вам также может быть интересно:

Drag and Drop UWP — c# xaml mvvm
Вопрос: Нужно иметь возможность добавлять изображения в приложение путем перетаскивания из файловой системы У Grid включил AllowDrop. Но как добавить перетаскиваемые изображения в коллекцию? Т.к. те ...
Растягивание Высоты , Резина — html css html5
Вопрос: Здравствуйте! Реализовал резиновый дизайн. Растягивается ширина, но длина по % не растягивается. Возможно ли это реализовать? Или так и задумано, растягивание только на ширину ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
Jquery position().left Как быть на мобильниках? — javascript jquery css
Вопрос: На мобильных устройствах, если зумишь экран, position всегда разный. $('g').position().left Как сделать так, чтобы он не менял свои значения? Автор вопроса: ...
requestAnimation и очередность отрисовки — javascript canvas
Вопрос: Здравствуйте! Реализовал 2D игру и в Edge работает все плавно и круто, но в Firefox'e подвисает, сказали, что нужно сделать, чтобы раз-два момент и все ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Контекстное/всплывающее меню в Android — java android popup
Вопрос: Есть ли техническая возможность сделать приложение, добавляющее свое контекстное или всплывающее меню в любом месте системы? Хочу, чтобы при выделении любого текста появлялась дополнительная кнопка ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
Завершить службы циклом — c# windows-service
Вопрос: Можно ли остановить службы циклом? У меня есть список служб, занёс их в List List<string> name = new List<string> { "AdobeARMservice", "RemoteRegistry", "TermService", "Messenger", "SSDPSRV", ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
RecyclerView — разная разметка — android recyclerview
Вопрос: Смотрел, я смотрел в сторону RecyclerView и наконец решил кинуть ListView и на тебе! В "плохом прошлом" мой ListView использовался для двух разметок. Сейчас я ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
Как правильно передать массив аргументом для пользовательской функции — php
Вопрос: Если не брать в функцию все это, тогда результат работает. А если вот так в функции все выполнять, тогда PHP ругается: «Invalid ...
ViewPager внутри ViewPager — такие матрешки работают? — android viewpager
Вопрос: Доброго времени суток. Назрела новая задача. Есть каталог мастеров. При выборе конкретного мастера открывается его страница (активити с ViewPager), и теперь мастеров можно перелистывать свайпом. ...
Почему id всегда 1 Yii2 — yii авторизация
Вопрос: Использую все как по документации. Для получения информации о пользователе использую $identity = $model->findOne(]); И каким бы не был email, id пользователя всегда ...

Оставьте ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *