如何使用JavaScript为div元素播放CSS关键帧动画？

嘿，我来帮你搞定这个问题！你已经写好了fading这个CSS关键帧动画，现在只需要用JavaScript给div#test添加上动画相关的CSS规则就行，这里有两种常用的实现方式，推荐第一种哦：

方法一：通过添加CSS类触发（推荐，样式与逻辑分离） #

首先，我们先在CSS里定义一个包含动画属性的类，把动画的时长、缓动效果等配置都放在这里：

#test {
  background-color: blue;
  width: 100px;
  height: 100px;
}

@keyframes fading {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 新增一个触发动画的类 */
.fade-animation {
  animation: fading 1s linear forwards; /* forwards让动画结束后保持最后一帧状态 */
}

然后用JavaScript获取目标元素，给它添加这个类就可以触发动画了：

// 获取div#test元素
const testElement = document.getElementById('test');
// 添加类来启动动画
testElement.classList.add('fade-animation');

这种方式的好处是样式都集中在CSS里，JavaScript只负责触发动作，代码结构更清晰，后期维护也更方便。

方法二：直接通过JavaScript设置style属性 #

如果不想额外定义CSS类，也可以直接通过JS给元素设置animation样式属性：

const testElement = document.getElementById('test');
// 直接设置动画样式
testElement.style.animation = 'fading 1s linear forwards';

不过这种方式把样式逻辑写在了JavaScript里，当动画需要调整参数时，得去JS代码里修改，不如第一种方式灵活。

补充：重复触发动画的小技巧 #

如果需要重复触发这个动画，直接再次添加类或者设置style是不会生效的（因为元素已经有这个动画属性了），这时候可以先移除动画类/清空样式，再重新添加，比如：

function restartAnimation() {
  const testElement = document.getElementById('test');
  // 先移除动画类
  testElement.classList.remove('fade-animation');
  // 用requestAnimationFrame确保浏览器完成重绘后再添加类
  requestAnimationFrame(() => {
    testElement.classList.add('fade-animation');
  });
}

// 调用这个函数就能重复触发动画啦
// restartAnimation();

内容的提问来源于stack exchange，提问作者Clint Anumudu