如何在 JavaScript 中創建 CSS 動畫？

Question

如何在 JavaScript 中創建下面的 CSS 動畫？ 我已經遍及谷歌，並嘗試多次創建它，但我無法弄清楚如何做到這一點。

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}

要運行這個，我知道我可以使用下面顯示的內容，但我不知道如何創建這個動畫。 任何人都可以幫忙嗎？

element.style.animation = "fadeIn 5s linear";

Answer 1

您可以使用帶有transition javascript 來實現它

 // start frame const start = { opacity: 0 }; // end frame const end = { opacity: 1 }; const element = document.querySelector('span'); Object.assign(element.style, start); element.style.transition = 'all 5s linear'; requestAnimationFrame(() => { Object.assign(element.style, end); });

 <span>Lorem Ipsum</span>

Answer 2

“在 Javascript 中創建”究竟是什么意思？ 不使用CSS？

如果是這樣，您可以使用簡單的時間間隔來更新元素的不透明度，直到達到 0 或 100。簡單示例：

let opacity = 0; 
const fadeEl = document.getElementById("fadeInElementIdWithOpacity0");

    const fadeInInterval = setInterval(() => { 
         
        if (opacity < 1) { 
            opacity = opacity + 0.1 
            fadeEl.style.opacity = opacity; 
        } else { 
            clearInterval(fadeInInterval); 
        } 
    }, 200);

Answer 3

您可以首先使用任意數量的間隔定義此函數，然后使用任何 querySelector 調用它

function fadeIn(x) { 
            var fade = document.querySelector(x); 
            var opacity = 0; 
            var intervalID = setInterval(function() { 
  
                if (opacity < 1) { 
                    opacity = opacity + 0.1 
                    fade.style.opacity = opacity; 
                } else { 
                    clearInterval(intervalID); 
                } 
            }, 200); 
        } 

在控制台中使用此功能並運行fadeIn(".-logo")將淡入stackoverflow 的標志