butten 触发 css动画

在网页设计中，当你想要通过按钮触发CSS动画时，可以使用JavaScript配合HTML和CSS来实现。以下是一个基本的示例：

**HTML部分:**

<button id="animationButton">点击触发动画</button>
<div class="animatedElement"></div>

在这个例子中，我们有一个按钮`#animationButton`和一个待动画的元素`animatedElement`。

**CSS部分:**

.animatedElement {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: slideIn; /* 动画名称 */
  animation-duration: 2s; /* 动画持续时间 */
}

@keyframes slideIn {
  from {transform: translateY(100%);}
  to {transform: translateY(0);}
}

这里定义了一个名为`slideIn`的动画，它会使元素从屏幕底部向上移动到其原始位置。

**JavaScript部分:**

document.getElementById('animationButton').addEventListener('click', function() {
  const animatedElement = document.querySelector('.animatedElement');
  animatedElement.classList.toggle('animate'); /* 当按钮点击时，切换 animate 类，开始或停止动画 */
});

在JavaScript中，我们给按钮添加了点击事件监听器，当点击时，会切换`.animatedElement`元素上是否有`animate`类。如果已经有了这个类，动画将会停止；如果没有，则启动动画。

为了真正触发动画，你需要在`.animatedElement`类中添加另一个动画相关的类，例如`.animate`，并为其定义相应的关键帧动画。在上述示例中，我已经假设了一个名为`animate`的类，它应该包含了与`slideIn`动画相对应的关键帧设置。