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.
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.
- use negative
animation-delay
, so for exampleanimation-duration: -2s;
- use separate not nested elements for each spinning element.