CSS纯加载旋转器hover时伪元素动画延迟未在首次旋转生效的调试咨询

Let's break down why this is happening first:
Your pseudo-elements (::before and ::after) have their animation-delay set in their base styles, along with animation-play-state: paused. The browser starts counting down the delay timer as soon as the page loads—not when you hover to start the animation. By the time you hover, the delay has already expired, so the animation skips the waiting period on the first run. Only after the animation completes its first full cycle does the delay kick in for subsequent loops.

Here's the Fix #

Move the animation-delay properties from the base pseudo-element styles to the hover state. This way, the delay timer only starts when you actually trigger the hover, ensuring it works correctly from the first time you hover over the spinner:

.spin { margin: auto; margin-top: 23px; margin-bottom: 23px; }
.spin div { 
  width: 50px; 
  height: 50px; 
  margin: auto; 
  border-radius: 50%; 
  border: 3px solid #2196f3; 
  border-bottom-color: transparent; 
  position: relative; 
  animation-name: spinning; 
  animation-duration: 1s; 
  animation-play-state: paused; 
  animation-iteration-count: infinite; 
  animation-timing-function: linear; 
}
.spin div::before { 
  content: ""; 
  position: absolute; 
  top: -3px; 
  right: -3px; 
  width: 100%; 
  height: 100%; 
  border-radius: 50%; 
  border: 3px solid orange; 
  border-bottom-color: transparent; 
  scale: 1.2; 
  animation-name: spinning; 
  animation-duration: 2s; 
  animation-iteration-count: infinite; 
  animation-play-state: paused; 
  animation-timing-function: linear; 
}
.spin div::after { 
  content: ""; 
  position: absolute; 
  top: -3px; 
  right: -3px; 
  width: 100%; 
  height: 100%; 
  border-radius: 50%; 
  border: 3px solid black; 
  border-bottom-color: transparent; 
  scale: 1.4; 
  animation-name: spinning; 
  animation-duration: 2s; 
  animation-iteration-count: infinite; 
  animation-play-state: paused; 
  animation-timing-function: linear; 
}
.spin div:hover { 
  animation-play-state: running; 
}
.spin div:hover::before { 
  animation-play-state: running; 
  animation-delay: 1s; /* Add delay to hover state */
}
.spin div:hover::after { 
  animation-play-state: running; 
  animation-delay: 2s; /* Add delay to hover state */
}
@keyframes spinning { 100% { transform: rotate(1turn) } }

<div class="spin"> <div></div> </div>

How This Works #

By shifting the animation-delay to the hover selector, we ensure that the delay timer only starts when the hover event occurs. When you first hover over the spinner:

• The main blue div starts spinning immediately (no delay)
• The orange pseudo-element waits 1 second before starting its 2-second spin cycle
• The black pseudo-element waits 2 seconds before starting its 2-second spin cycle

This matches exactly what you're expecting—each element follows its intended timing from the moment you hover, with no weird first-run behavior.

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