如何在 JavaScript 中创建 CSS 动画？

Question

如何在 JavaScript 中创建下面的 CSS 动画？我找遍了 Google，并多次尝试创建它，但我不知道该怎么做。

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

对于运行这个，我知道我可以使用下图所示的东西，但我不知道如何制作这个动画。有人可以帮忙吗？

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

Answer 1

“在 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 2

您可以先用任意数量的间隔定义此函数，然后用任何 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") 将在 Whosebug 的徽标中淡出

Answer 3

您可以使用 javascript 和 transition 来实现它

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

如何在 JavaScript 中创建 CSS 动画？

How can I create a CSS animation in JavaScript?

javascript

css

animation

opacity

css-animations