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/)

理解差異：

關鍵差異淡出和幻燈片動畫之間的差異在於正在轉換的屬性。對於淡出效果，它是不透明度屬性，而對於幻燈片動畫，它通常是位置屬性，例如頂部或左側。

在提供的程式碼的情況下，動畫設定為轉換頂部屬性，這會將元素移出螢幕而不是淡出。