Изменить фоновое изображение с помощью CSS-анимации - PullRequest
Новая
       37

Изменить фоновое изображение с помощью CSS-анимации

0 голосов
/ 09 июля 2019

Как я могу заставить этот класс изменить свое фоновое изображение через 2 секунды после того, как div находится в окне просмотра? Для меня это не меняется: 

.cover-gradient {
  background-image: none;
}

.cover-gradient:after {
  opacity: 1;
  transition: 0.3s;
  animation: fadeMe 2s linear;
}

@keyframes fadeMe {
  0% {
    background-image: none;
  }
  100% {
    background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
  }
}

Спасибо.

1 Ответ

0 голосов
/ 09 июля 2019

При анимации в CSS вам нужно анимировать между двумя одинаковыми значениями.

Например, это будет работать:

max-height: 0px; и max-height: 100px;

иэто не будет:

max-height: none; и max-height: 100px;

Однако по соображениям производительности рекомендуется использовать свойства opacity и transform при анимации в CSS 

.cover-gradient {
  height: 100vh;
  width: 100vw;
  opacity: 0;
  animation: fadeMe 0.3s linear;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  background-image: linear-gradient(to right, rgba(179, 49, 95, 0.5), rgba(58, 0, 117, 0.5));
}

@keyframes fadeMe {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

https://jsfiddle.net/hellogareth/j3ytzq52/22

...