如何实现点击<a>链接时触发多个CSS动画效果？

问题排查 #

你当前的代码有几个硬伤导致动画无法正常工作：

1. CSS语法错误：.trans-down里的动画名写了trans-dow -anim，多余的空格让浏览器识别不了正确的关键帧
2. 关键帧不全：只写了动画的起始状态（0%），没定义结束状态，元素根本不会动
3. 动画默认自动跑：页面加载时动画就会执行，不是等点击后才触发
4. 点第二次没反应：用animationPlayState只能控制暂停/继续，动画跑完后再点没用

推荐方案：用类切换触发动画（支持重复点击） #

这种方式更灵活，代码也更好维护，下面是完整修正代码：

HTML #

<a class="play">click on me</a>

<div class="trans-up"></div>
<div class="trans-mid"></div>
<div class="trans-down"></div>

CSS #

/* 先给元素加基础样式，确保位移生效 */
.trans-up, .trans-mid, .trans-down {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 10px;
}
/* 初始状态：元素在视口外 */
.trans-up {
  top: -100%;
  background: red;
}
.trans-mid {
  bottom: -100%;
  background: blue;
}
.trans-down {
  bottom: -100%;
  background: green;
}

/* 动画关键帧：定义从初始到目标的变化 */
@keyframes trans-up-anim {
  to {
    top: 0;
  }
}
@keyframes trans-down-anim {
  to {
    bottom: 0;
  }
}

/* 触发动画的类：只有加上这个类才会执行动画 */
.animate {
  animation-fill-mode: forwards;
}
.trans-up.animate {
  animation: trans-up-anim 1.8s forwards;
}
.trans-mid.animate {
  animation: trans-down-anim 1.3s forwards;
}
.trans-down.animate {
  animation: trans-down-anim 1.5s forwards;
}

JavaScript #

const playBtn = document.querySelector('.play');
const animElements = document.querySelectorAll('.trans-up, .trans-mid, .trans-down');

playBtn.addEventListener('click', () => {
  // 先移除类重置状态，强制重绘后再加类，实现重复触发
  animElements.forEach(el => {
    el.classList.remove('animate');
    void el.offsetWidth;
    el.classList.add('animate');
  });
});

原代码修复（仅支持单次触发） #

如果只需要点一次触发动画，修正原代码的错误即可：

修正后的CSS #

.trans-up, .trans-mid, .trans-down {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 10px;
  animation-play-state: paused; /* 初始暂停动画 */
}
.trans-up {
  animation: trans-up-anim 1.8s forwards;
  top: -100%;
  background: red;
}
.trans-down {
  animation: trans-down-anim 1.5s forwards; /* 修正动画名的空格错误 */
  bottom: -100%;
  background: green;
}
.trans-mid {
  animation: trans-down-anim 1.3s forwards;
  bottom: -100%;
  background: blue;
}

@keyframes trans-up-anim {
  100% { /* 补全结束状态 */
    top: 0;
  }
}
@keyframes trans-down-anim {
  100% { /* 补全结束状态 */
    bottom: 0;
  }
}

修正后的JavaScript #

document.querySelector('.play').addEventListener('click', function() {
  document.querySelector('.trans-up').style.animationPlayState = 'running';
  document.querySelector('.trans-mid').style.animationPlayState = 'running';
  document.querySelector('.trans-down').style.animationPlayState = 'running';
});

优化小贴士 #

• 尽量用类操作代替直接改行内样式：代码更整洁，也方便后续扩展动画效果
• 关键帧一定要写全起始/结束状态：不然浏览器不知道要怎么动
• 给元素加position: absolute/fixed：不然top/bottom属性不会生效
• 要重复触发的话，必须重置动画状态：用移除类+强制重绘的方式就能实现
• 批量操作元素：用querySelectorAll一次性选完，减少DOM查询次数

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