CSS Pure loading spin rotates full turn before it shows the delay function associated with pseudo elements

Hanani Almuhanna 0
Viewed 25

This loading spinner I have created doesn't show the delay function at the moment I hover on the element, but it rotates a full turn before creating the animation on the second turn; how could I debug this issue?

Kindly, check my codepen code link so you can get what I mean, thank you.

Codepen

Each border of spin pseudo elements must move at different timing from the beginning when I hover on the element, I have set the animation delay function, and it works properly but not at the first turn.

This is how I wrote the code:

.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-delay: 1s;
  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-delay: 2s;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div:hover {
  animation-play-state: running;
}

.spin div:hover::before {
  animation-play-state: running;
}

.spin div:hover::after {
  animation-play-state: running;
}

@keyframes spinning {
  100% {
    transform: rotate(1turn)
  }
}
<div class="spin">
  <div></div>
</div>

spin animation css html
2 Answers

Commenting out the initial animation-delay: 1s causes the spinners to start immediately out of sync, which I believe is the behavior you are seeking.

.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-delay: 1s;*/
  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-delay: 2s;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div:hover {
  animation-play-state: running;
}

.spin div:hover::before {
  animation-play-state: running;
}

.spin div:hover::after {
  animation-play-state: running;
}

@keyframes spinning {
  100% {
    transform: rotate(1turn)
  }
}
<div class="spin">
  <div></div>
</div>

As for how to debug it-- there is an "animations drawer" in the Chrome dev tools: you can learn more about the Chrome dev tools animations drawer in this blog post.

Alexander Nied0

Problem is that your first animation spins all 3 of the elements. Your pseudo elements start spinning only after their delay is over. If you want to offset animations from the very beginning you have 2 options.

  1. use negative animation-delay, so for example animation-duration: -2s;
  2. use separate not nested elements for each spinning element.
AssGoblin690
Related