如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？

CSS3 轉場 - 淡出效果

在 CSS3 中，可以透過使用關鍵影格動畫來實現淡出效果。但是，確保正確配置動畫設定以達到所需的效果非常重要。

在提供的程式碼中，上滑動畫不起作用，因為頂部屬性正在動畫化，這會垂直移動元素離開頁面。若要實現淡出效果，應將不透明度屬性設為動畫。以下是程式碼的更新版本：

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

或者，可以使用更簡潔的CSS3 過渡方法：

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

要使用此方法淡出元素，只需添加元素的隱藏類：

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

這將在2 秒內將元素轉換為opacity: 0，從而創建淡出效果。請注意，visibility: hide 添加了延遲，允許淡出動畫在元素隱藏之前完成。

以上是如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？的詳細內容。更多資訊請關注PHP中文網其他相關文章！