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中文網其他相關文章！
