使用纯CSS代码实现动画的暂停与播放

使用纯CSS实现动画的暂停与播放有一定的限制，因为CSS本身并没有提供直接控制动画播放和暂停的API。不过，你可以通过一些技巧来间接实现这个功能。

一种常见的方法是使用CSS的:hover伪类来暂停动画。当用户将鼠标悬停在元素上时，动画会暂停，当鼠标离开时，动画会继续播放。这可以用于简单的交互场景，但显然不够灵活。

如果你需要更复杂的控制，你可能需要结合JavaScript来切换CSS类，从而实现动画的播放和暂停。

但如果你坚持要使用纯CSS，以下是一个使用:checked伪类和<input type="checkbox">来控制动画播放和暂停的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Play/Pause</title>
<style>
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  #animatedElement {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: spin 2s linear infinite;
    animation-play-state: paused; /* 默认暂停动画 */
  }

  #toggle:checked ~ #animatedElement {
    animation-play-state: running; /* 当复选框被选中时播放动画 */
  }
</style>
</head>
<body>

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Animation</label>

<div id="animatedElement"></div>

</body>
</html>

在这个示例中，我们创建了一个红色的方块，并为其定义了一个名为spin的旋转动画。默认情况下，动画是暂停的（animation-play-state: paused;）。然后，我们使用一个复选框来控制动画的播放状态。当复选框被选中时，我们通过CSS选择器将动画的播放状态更改为running，从而播放动画。