css - 在滑出动画上使不透明度为 0.5

Question

这是我的 CSS:

.sliding-background {
  height: 300px;
  width: 5000px;
  animation: slide 30s linear infinite;
}

@keyframes slide {
  0% {
   transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1692px, 0, 0);
  }
}

如您所想，最终结果是图片幻灯片。

我的问题: 我想要它，以便当图像/元素从屏幕上消失时，opacity 变为 0.5。

Answer 1

你的描述有点短，这里的代码缺少html，所以我们可以准确地看到你的意图是什么，你的问题是什么。

但是! :)

查看您的代码和您的问题的最短答案是稍微编辑动画关键帧。

只是不要在 100% 而是更早地结束你的动画，比如 80%。 然后最后的 20% 是你的不透明度动画。 记得设置合适的动画时间，这样就不会太快了:)

@keyframes slide {
  0% {
   transform: translate3d(0, 0, 0);
  }
  80% {
    transform: translate3d(-1692px, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
    opacity:.5;
  }
}

80% 只是我的建议，你可以使用任何你喜欢的 - 只要确保为你的不透明度变化保留一些关键帧的百分比。

请记住为变换和关键帧使用供应商前缀!