Home > OS >  CSS Pure loading spin rotates full turn before it shows the delay function associated with pseudo el
CSS Pure loading spin rotates full turn before it shows the delay function associated with pseudo el

Time:09-19

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 >
  <div></div>
</div>

CodePudding user response:

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 >
  <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.

CodePudding user response:

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.
  • Related