如何让动画在单击时仅使用CSS运行？

要让动画在单击时仅使用CSS运行，可以通过以下步骤实现：

1. 创建一个HTML元素，例如一个<div>标签，用于展示动画效果。
2. 使用CSS定义动画效果，可以使用@keyframes规则来创建关键帧动画。在关键帧中定义动画的起始状态和结束状态。
3. 为HTML元素添加一个CSS类，用于触发动画效果。例如，可以为元素添加一个名为"animate"的类。
4. 使用JavaScript监听元素的点击事件。
5. 在点击事件的处理函数中，使用JavaScript为元素添加或移除CSS类。通过添加类名"animate"来触发动画效果，通过移除类名来停止动画。

下面是一个示例代码：

HTML:

<div id="myElement"></div>

CSS:

@keyframes myAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.animate {
  animation: myAnimation 1s infinite;
}

JavaScript:

var element = document.getElementById("myElement");

element.addEventListener("click", function() {
  element.classList.toggle("animate");
});

在上面的示例中，点击<div>元素时，会为其添加或移除名为"animate"的类，从而触发或停止动画效果。CSS中定义了一个名为"myAnimation"的关键帧动画，通过animation属性将其应用到元素上。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整和扩展。