使用线性渐变会破坏 CSS animation

Question

我有一些图像正在尝试制作幻灯片。 我正在使用 CSS 来提供淡入淡出效果。 这是一些可以正确工作和转换的代码示例：

.hero {
  background-image: url('/slideshow_images/1.jpg');
  animation: changeBackground 30s infinite;
  animation-duration: 35s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}

/* Calculate each background % based on how many photos will be shown and for how long*/
/* We need both urls listed in each group to prevent the screen from flashing between background imgs */
@keyframes changeBackground {
  0%,
  6%,
  12% {
    background-image: url('/slideshow_images/1.jpg'), url('/slideshow_images/2.jpg');
  }
  24%,
  30%,
  36% {
    background-image: url('/slideshow_images/2.jpg'), url('/slideshow_images/3.jpg');
  }
  48%,
  54%,
  60% {
    background-image: url('/slideshow_images/3.jpg'), url('/slideshow_images/4.jpg');
  }
  72%,
  78%,
  84% {
    background-image: url('/slideshow_images/4.jpg'), url('/slideshow_images/1.jpg');
  }
}

但是，当我为每张照片添加linear-gradient时。 平滑过渡停止。 现在背景发生了变化，没有任何 animation 。 它只是改变了。 这是我尝试的代码示例：

.hero {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/1.jpg');
    animation: changeBackground 15s infinite;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes changeBackground {
    0%,
    6%,
    12% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/1.jpg'), url('/slideshow_images/2.jpg');
    }
    24%,
    30%,
    36% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/2.jpg'), url('/slideshow_images/3.jpg');
    }
    48%,
    54%,
    60% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/3.jpg'), url('/slideshow_images/4.jpg');
    }
    72%,
    78%,
    84% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/4.jpg'), url('/slideshow_images/1.jpg');
    }
}

如何像在第一个片段中一样保留 animation，但为图像添加线性渐变？ 顺便说一句，我在每组中有两个图像 URL 的原因是因为这解决了我在背景图像更改时屏幕会出现 flash 的问题

Answer 1

动画

当您定义相同类型的值时，动画才会起作用。 例如，这将不起作用，因为边距从 10px 更改为自动：

/* This will blink */
@keyframes animationTest {
  0%{margin:10px}
  100%{margin:auto}
}

为了使它起作用，转换应该计算为等价的，例如 px 到 px：

@keyframes animationTest {
  0%{margin:10px}
  100%{margin:20px}
}

添加第二个背景

也就是说，将渐变与背景图像混合总是会闪烁。 您的解决方案是拆分值。 这是如何应用第二个背景属性而不影响之前的 animation

/* add to .hero relative position */
.hero {
  position: relative;
}

/* Define your second background separately. 
You can also apply an animation */
.hero::after {
  content: "";
  position: absolute;
  left:0;
  right:0;
  top:0;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}