css怎么点击按钮再播放动画

要实现点击按钮后播放动画，你可以使用CSS的`animation`属性和JavaScript来实现。下面是一种常见的方法：

1. 创建CSS动画：

   @keyframes yourAnimation {
     0% { /* 起始状态 */ }
     100% { /* 终止状态 */ }
   }

2. 将动画应用于元素：

   .yourElement {
     animation-name: yourAnimation;
     animation-duration: 2s; /* 动画持续时间 */
     animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
   }

3. 在HTML中添加一个按钮：

   <button id="playButton">播放动画</button>

4. 使用JavaScript监听按钮的点击事件，并添加/删除CSS类来触发动画：

   const playButton = document.getElementById("playButton");
   const yourElement = document.querySelector(".yourElement");

   playButton.addEventListener("click", function() {
     yourElement.classList.add("animate"); // 添加CSS类以触发动画
   });

   yourElement.addEventListener("animationend", function() {
     yourElement.classList.remove("animate"); // 动画结束后移除CSS类
   });

在上述代码中，通过点击按钮触发JavaScript事件处理程序，该处理程序将在元素上添加一个CSS类，从而触发动画。使用`animationend`事件监听动画的结束，然后移除CSS类。

记得将`.yourElement`替换为你要播放动画的实际元素类名，并根据需要调整动画的关键帧和持续时间。