如何通过JavaScript点击修改div动画属性，实现加载动画持续加速？

你的核心需求是点击加载界面后让动画永久保持加速状态，而非按住鼠标时才加速。下面提供两种可行方案，同时指出你原有代码的问题：

方法一：CSS变量 + JavaScript（推荐） #

用CSS变量统一管理动画时长，点击后通过JS直接修改变量，所有关联的动画都会自动更新，代码最简洁。

修改后的CSS #

把原有的固定2s替换为CSS变量--duration：

body
{
  margin:0;
  padding:0;
  background:#262626;
}
.loading
{
  /* 定义全局变量，默认时长2s */
  --duration: 2s;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #3c3c3c;
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#fff000;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 10px #fff000;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.loading:before
{
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #fff000;
  border-right:3px solid #fff000;
  border-radius:50%;
  /* 使用变量替代固定时长 */
  animation:animateC var(--duration) linear infinite;
}
span
{
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  /* 使用变量替代固定时长 */
  animation:animate var(--duration) linear infinite;
}
span:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff000;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}

修改后的JavaScript #

直接修改CSS变量的值即可：

function fast() {
  // 将动画时长改为0.1s，实现加速
  document.getElementById("a").style.setProperty('--duration', '0.1s');
}

方法二：新增CSS类 + JavaScript #

如果不想用CSS变量，可以给加载容器新增一个类，通过类来切换动画速度。

修改后的CSS #

在原有CSS基础上新增.fast类的样式：

/* 原有CSS代码不变，添加以下内容 */
.loading.fast:before {
  animation: animateC 0.1s linear infinite;
}
.loading.fast span {
  animation: animate 0.1s linear infinite;
}

修改后的JavaScript #

点击时给容器添加fast类：

function fast() {
  document.getElementById("a").classList.add('fast');
}

你原有代码的问题说明 #

1. 变量拼接错误：你写的"animateC ys linear infinite"里，ys不会被解析为变量y加单位s，正确写法应该是"animateC " + y + "s linear infinite"。
2. 无法控制伪元素动画：.loading:before的动画是在CSS中定义的，直接修改#a的style.animation只会影响元素本身，无法作用于伪元素，这是你代码不生效的核心原因。
3. :active的局限性：:active选择器仅在鼠标按住元素时生效，松开后会自动恢复原状态，所以必须通过JS触发永久状态变更。

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