如何添加按钮切换CSS动画？Fiddle动画启停切换失败求助

看起来你现在的代码只定义了动画的基础属性，但缺少两个关键部分：具体的动画关键帧（@keyframes），以及控制动画启停的交互逻辑。我来一步步帮你搞定：

1. 补全CSS动画关键帧 #

首先，你需要定义动画具体要执行的动作（比如旋转、位移等），结合你设置的transform-origin: bottom left，咱们做一个摇摆旋转的动画示例：

/* 先定义动画关键帧，明确动画的变化过程 */
@keyframes swing {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

/* 你的原有样式，补充动画名称属性 */
body .a [class^="b"] {
  width: 200px; 
  height: 142.8571428571px; 
  margin: 0 auto; 
  position: relative; 
  left: 71.4285714286px; 
  -webkit-transform-origin: bottom left; 
  transform-origin: bottom left; 
  border-radius: 100% 300%; 
  background: radial-gradient(bottom left, transparent 41.4285714286px, #ff0c0c 41.4285714286px, #3f0000 -15px, #ff0c0c 71.4285714286px); 
  box-shadow: 71.4285714286px 71.4285714286px 142.8571428571px rgb(164, 69, 14); 
  /* 绑定刚才定义的动画 */
  animation-name: swing;
  animation-duration: 0.5s; 
  animation-delay: 1s; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite;
}

2. 添加切换按钮和交互逻辑 #

接下来，我们需要一个按钮，并用JavaScript来控制动画的启停。这里有两种常用的实现方式：

方法一：通过切换CSS类控制 #

先给动画元素绑定默认的动画，再新增一个暂停类，点击按钮时切换类的存在状态：

<!-- 添加切换按钮 -->
<button id="toggleAnimation">暂停动画</button>
<!-- 你的动画元素容器 -->
<div class="a">
  <div class="b"></div>
</div>

/* 新增暂停动画的类，利用animation-play-state属性控制 */
.anim-paused {
  animation-play-state: paused;
}

const toggleBtn = document.getElementById('toggleAnimation');
const animElement = document.querySelector('.a [class^="b"]');

toggleBtn.addEventListener('click', () => {
  // 切换暂停类
  animElement.classList.toggle('anim-paused');
  // 同步修改按钮文字，提升用户体验
  toggleBtn.textContent = animElement.classList.contains('anim-paused') ? '启动动画' : '暂停动画';
});

方法二：直接修改元素的动画状态属性 #

如果不想额外添加CSS类，也可以直接通过JS操作元素的animationPlayState属性：

const toggleBtn = document.getElementById('toggleAnimation');
const animElement = document.querySelector('.a [class^="b"]');
let isPaused = false;

toggleBtn.addEventListener('click', () => {
  isPaused = !isPaused;
  // 直接修改动画播放状态
  animElement.style.animationPlayState = isPaused ? 'paused' : 'running';
  toggleBtn.textContent = isPaused ? '启动动画' : '暂停动画';
});

为什么原有代码无法实现切换？ #

• 缺少@keyframes定义：浏览器不知道动画要执行什么动作，导致动画根本无法运行；
• 没有交互控制逻辑：动画一旦设置就会无限循环，没有触发启停的代码来改变它的播放状态。

按照上面的步骤调整后，点击按钮就能轻松切换动画的启停状态啦！

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