如何缓慢地 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;  }}