Question

我正在尝试设置标题背景图像的动画，但过渡效果并不像我在教程中看到的那样平滑。（忽略渐变）

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");
    }
}

Answer 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标记而不是background-image来使用div。

Answer 2

background-image是无法根据MDN进行动画处理的CSS属性之一。

它可能在某些地方有效，但这不是标准行为。

为什么CSS背景过渡不流畅？

2 个答案: