Почему переход фона CSS не является плавным?

#css #css-animations #css-transitions

#css #css-анимации #css-переходы

Вопрос:

Я пытаюсь анимировать фоновые изображения моего заголовка, но переход не плавный, как я видел в руководстве. (Игнорируйте градиент)

 animation: slide 10s infinite;
@keyframes slide {
    0% {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
            ),url("imgs/header-1.jpg");
    }

    33% {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
            ),url("imgs/header-2.jpg");
    }

    67% {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
            ),url("imgs/header-3.jpg");
    }
}

Ответ №1:

UPD: Хотя согласно документации background-image свойство не может быть анимировано, оно может работать в некоторых средах. Например, браузер Chrome позволяет отображать переходы для background-image . Однако он должен включать только url(/path/to/img) без каких-либо других свойств. Итак, в вашем случае просто удалите все определения градиента в ключевых кадрах, вот так:

 @keyframes slide {
    0% {
        background-image: url("imgs/header-1.jpg");
    }

    33% {
        background-image: url("imgs/header-2.jpg");
    }

    67% {
        background-image: url("imgs/header-3.jpg");
    }
}

Надежный подход:

Хорошо, итак, основная проблема в вашем коде заключается в том, что background-image свойство не должно быть анимировано. Однако можно добиться желаемого эффекта перехода: вам нужно разместить несколько блоков с изображениями один над другим и просто менять их непрозрачность каждые несколько секунд. opacity Свойство может быть анимировано, поэтому общий эффект будет плавным.

Вот пример:

 @keyframes fadeInOut {
  0% {
    opacity:1;
  }
  33% {
    opacity:0;
  }
  66% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.container {
  width: 400px;
  height: 400px;
  position: relative;
}

.animated-image {
  position: absolute;
  width: 100%;
  height: 100%;
  animation-name: fadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 9s;
  animation-direction: alternate;
}

.animated-image:nth-of-type(1) {
  animation-delay: 6s;
}

.animated-image:nth-of-type(2) {
  animation-delay: 3s;
}

.animated-image:nth-of-type(3) {
  animation-delay: 0s;
}

.image-1 {
  background-image: url(https://i.picsum.photos/id/299/400/400.jpg?hmac=JWLtcI8nmHDFvbS34TW5_MfzwOHSkXpWDLoXlNLyfAA);
}

.image-2 {
  background-image: url(https://i.picsum.photos/id/147/400/400.jpg?hmac=EtobpNQI_FLctas3TyOZMRQX362T9SCJs1rvd1S7d8Y);
}

.image-3 {
  background-image: url(https://i.picsum.photos/id/906/400/400.jpg?hmac=VO0HSf238e6GuEC7_yx1TKPO9Z0iZgl7BgmoWyjNbXo);
}

 <div class="container">
  <div class="animated-image image-1"></div>
  <div class="animated-image image-2"></div>
  <div class="animated-image image-3"></div>
</div>

Обратите внимание, что вы можете проделать этот трюк с любым типом HTML-элемента, поэтому вы можете использовать img тег вместо divs с background-image , если хотите.

1. Хм, попробую ваш метод. Но как этот парень анимирует фоновое изображение? [ссылка] ( youtu.be/Vr4Ay4td3xU )

2. @NileshBhatia, кажется, это работает в некоторых средах, несмотря на то, что говорится в документации. Я выяснил, что ваш код будет работать, по крайней мере, в Chrome, если вы удалите ключевые кадры определения градиента. Я обновил ответ для вас.

Ответ №2:

background-image это одно из свойств CSS, которое нельзя анимировать в соответствии с MDN.

Это может работать в некоторых местах, но это не стандартное поведение.