滑出动画使不透明度为0.5

Question

这是我的CSS：

opacity

你可以想象最终的结果是图片的幻灯片。

我的问题： 我想要它，以便当图像/元素从屏幕中消失时，0.5变为{{1}}。

Answer 1

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

BUT！ ：）

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

只是结束你的动画不是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％只是我的建议，你可以随意使用 - 只需确保为不透明度变化留下一些关键帧。

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