javascript - 如何在 JavaScript 中创建 CSS 动画？

Question

如何在 JavaScript 中创建下面的 CSS 动画？我已经查看了整个谷歌，并多次尝试创建它，但我无法弄清楚如何做到这一点。

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

要运行它，我知道我可以使用下面显示的内容，但我不知道如何创建此动画。任何人都可以帮忙吗？

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

标签： javascriptcssanimationcss-animationsopacity

Answer 1

您可以使用 javascript withtransition来实现它

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