如何缓慢地 CSS 过渡到 opacity = 1，以及快速/立即过渡到 opacity = 0？

Question

.item {  opacity: 0;  transition: opacity 6s;}我使用 JS 将不透明度从 0 设置为 1，反之亦然。CSS中有没有一种方法可以使不透明度在最后6秒从0到1过渡，但在最后0秒从1到0过渡？我想我可以在 JS 中设置转换属性，但是有没有办法用 CSS 产生这种行为？

Answer 1

在两个不同的类中使用过渡属性，您将在其中设置不同的不透明度。

.itemHidden {

  opacity: 0;

  transition: opacity 6s;

}

.itemShown {

  opacity: 1;

  transition: opacity 0s;

}

Answer 2

我喜欢维杰的回答，因为它更短更甜蜜。但是，我认为值得一看的是如何使用关键帧创建动画，因为其中一条评论中也提到了这一点。使用关键帧的示例如下：

.item {

  animation-name: demo-animation;

  animation-duration: 6s;

}

@keyframes demo-animation

{

  25% {

    opacity: .25;

  }

  50% {

    opacity: .5;

  }

  75% {

    opacity: .75;

  }

  99.99% {

    opacity: 1;

  }

    100% {

    opacity: 0;

  }

}