如何通过按钮触发CSS动画？附示例代码求助

要通过按钮触发CSS动画，你需要结合JavaScript切换CSS类来实现（纯CSS无法直接监听按钮点击事件）。下面是完整的实现方案：

1. 调整后的HTML结构 #

原HTML里<h1>直接嵌套<div>语义上不太合理，这里做了小调整，你也可以保留自己的结构：

<button id="mybutton">click me!</button><br>
<div id="mydiv">
  <h1>hi</h1>
</div>

2. CSS动画与样式定义 #

先定义从下往上滑动的关键帧动画，再写一个触发动画的类：

#mydiv{
  border: 1px solid black;
  height: 100px;
  width: 100px;
  background: green;
  /* 让文本默认在容器底部 */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

#mydiv h1 {
  margin: 0;
  /* 初始状态：文本在容器外下方 */
  transform: translateY(100%);
}

/* 定义从下往上滑动的动画规则 */
@keyframes slideUp {
  to {
    transform: translateY(0);
  }
}

/* 触发动画的类 */
#mydiv.active h1 {
  animation: slideUp 0.5s ease-out forwards;
}

• animation-fill-mode: forwards 用于让动画结束后保持最后一帧状态，避免回弹
• 如果要让整个<div>滑动，直接把动画类应用在#mydiv上即可

3. JavaScript触发逻辑 #

给按钮添加点击事件，通过切换active类启动/重置动画：

const button = document.getElementById('mybutton');
const div = document.getElementById('mydiv');

button.addEventListener('click', () => {
  // 先移除类再添加，实现重复点击重新触发动画
  div.classList.remove('active');
  // 强制触发浏览器重绘，避免移除后立即添加类不生效
  void div.offsetWidth;
  div.classList.add('active');
});

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