為什麼我使用 CSS3 @keyframes 的上滑動畫不起作用？

CSS3 轉場 - 淡出效果

使用 CSS3，您可以輕鬆實現淡出效果以增強使用者體驗。但是，如果您遇到幻燈片動畫不起作用的問題，讓我們探討一下原因。

了解問題

您正在嘗試建立上滑動畫使用@關鍵影格。然而，動畫並沒有發生。為了調試這個問題，我們將深入研究您提供的程式碼。

<code class="css">.dummy-wrap {
  animation: slideup 2s;
}</code>

此程式碼指示 .dummy-wrap 類別應執行 2 秒的上滑動畫。 @keyframes 區塊定義動畫的運動：

<code class="css">@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}</code>

幻燈片動畫故障排除

檢查關鍵幀，我們注意到元素的位置僅在最後25 個中發生變化動畫的%。由於元素從頂部開始：0px；並在頂部：-20px; 結束，它實際上會立即移動到頂部：-20px;，從而產生突然的“向上滑動”效果。

淡出的替代解決方案

您可以使用不透明度來實現淡出效果，而不是使用翻譯。實作方法如下：

<code class="css">.hidden {
  opacity: 0;
  transition: opacity 2s;
}</code>

此技術逐漸降低元素的不透明度，在 2 秒內創造可見的淡出效果。

其他詳細資訊

在程式碼的初始版本中，突然的「向上滑動」效果是由於元素的位置僅在動畫的最後25% 中被修改。透過切換到不透明度並在整個持續時間內進行過渡，我們實現了平滑的淡出效果。

以上是為什麼我使用 CSS3 @keyframes 的上滑動畫不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！