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

/* Container for the animated element */
.animation-container {
  width: 100px;
  height: 100px;
  background-color: red;
  /* Initially, the animation plays */
  animation-play-state: running; /* or paused to start paused */
  animation: move 5s linear infinite;
}

/* The animation itself */
@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

/* Button styles (optional) */
button {
  margin-top: 10px;
}

/* JavaScript-free toggling using :hover and sibling selector (+) */
.animation-container:hover + button {  /* Target the button when hovering over the container */
    display: block; /* Show the button on hover (if initially hidden) */
}

.animation-container:hover {
  animation-play-state: paused;
}

.animation-container + button:hover ~ .animation-container{ /* Target the container when hovering over the button */
  animation-play-state: paused;
}

.animation-container + button:hover {
    display: block;
}


/*  Alternative: Using checkbox and the :checked pseudo-class  */

/* Hide the checkbox visually */
.play-pause-checkbox {
  display: none;
}

/* Style the label as a play/pause button */
.play-pause-label {
  display: inline-block;
  padding: 10px;
  background-color: #4CAF50; /* Green */
  color: white;
  border: none;
  cursor: pointer;
}

/* Pause the animation when the checkbox is checked */
.play-pause-checkbox:checked ~ .animation-container {
  animation-play-state: paused;
}

<!-- Example using hover -->
<div class="animation-container"></div>
<button style="display:none;">Pause</button>


<!-- Example using checkbox -->
<input type="checkbox" id="play-pause" class="play-pause-checkbox">
<label for="play-pause" class="play-pause-label">Toggle Play/Pause</label>
<div class="animation-container"></div>

Explanation and Key Improvements:

• animation-play-state: This CSS property is the core of controlling animation playback. It can be set to running or paused.

• Hover Method (JS-Free):

  • The :hover pseudo-class is used to pause the animation when the mouse hovers over the animated element. This provides a simple, JavaScript-free way to control the animation.
  • The adjacent sibling combinator + and general sibling combinator ~ are used to target elements relative to each other, enabling hover effects on both the animated box and a separate button. This makes the control more user-friendly. The button is initially hidden and appears only when hovering over the animation.

• Checkbox Method (JS-Free):

  • A checkbox and label are used to create a toggle button. The :checked pseudo-class targets the animated element when the checkbox is checked, pausing the animation. This provides a more explicit play/pause control.
  • The checkbox is hidden visually, and the label is styled to look like a button.

• Clearer Example: The provided code includes a complete, minimal HTML example to demonstrate how to use the CSS.

• Flexibility: You can easily adapt the CSS to control different animations by changing the animation name and keyframes.

This improved answer provides multiple pure CSS methods for pausing and playing animations, offering more flexibility and a better user experience. Choose the method that best suits your needs and design.