CSS3过渡：淡出效果

当尝试使用纯CSS实现淡出效果时，可能会感到困惑为什么幻灯片动画行不通。原因如下：

淡出效果的关键在于转换不透明度属性。 top属性，用于幻灯片动画，不会产生想要的效果。

使用CSS3 Transition的淡出效果

下面是一个如何实现淡出效果的例子使用CSS3过渡的淡出效果：

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

当此类应用于元素时，它将在 2 秒的时间内逐渐淡出。

其他资源：

• [CSS3 过渡：fadeIn 和 fadeOut 类似效果](https://css-tricks.com/css3-transition-fadein-fadeout/)

理解差异：

关键区别淡出和幻灯片动画之间的区别在于正在转换的属性。对于淡出效果，它是不透明度属性，而对于幻灯片动画，它通常是位置属性，如顶部或左侧。

在提供的代码的情况下，动画设置为转换顶部属性，这会将元素移出屏幕而不是淡出。