如何在点击时启动css动画，并在第二次点击时反转运行动画？

在前端开发中，可以通过以下方式在点击时启动CSS动画并在第二次点击时反转运行动画：

首先，定义一个CSS动画，可以使用CSS关键帧（@keyframes）规则来创建动画序列。例如，下面是一个简单的向左移动的动画：

@keyframes slide-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

接下来，将该动画应用到一个元素上，可以使用CSS的animation属性。例如，将上面定义的动画应用到一个按钮：

.button {
  animation: slide-left 1s linear forwards;
}

上述代码将按钮应用了一个向左移动的动画，持续时间为1秒，匀速运动，并且在动画结束后保持最后一个关键帧的状态（使用forwards属性）。

在点击事件处理程序中，可以通过添加/删除CSS类来启动/停止动画。例如，使用JavaScript代码监听按钮的点击事件，添加/删除一个名为active的CSS类：

var button = document.querySelector('.button');

button.addEventListener('click', function() {
  if (button.classList.contains('active')) {
    button.classList.remove('active');
  } else {
    button.classList.add('active');
  }
});

最后，在CSS中定义一个新的动画，并使用animation-direction属性来控制动画的方向。例如，定义一个反转的动画：

@keyframes slide-left-reverse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

.button.active {
  animation: slide-left-reverse 1s linear forwards;
}

上述代码将在按钮具有active类时应用反转的动画，使按钮向右移动回初始位置。

综上所述，通过在点击事件中添加/删除CSS类来切换动画的应用，可以实现在点击时启动CSS动画并在第二次点击时反转运行动画的效果。

腾讯云相关产品和产品介绍链接地址：