I recently made changes to a CSS script that involves the repetition of an animation task. Rather than repeating a segment of code 30 times, I decided to streamline it using a loop. Now, there are 30 <div></div> segments and each one undergoes the animation as follows:
@each $i from 1 through 30
#dna div:nth-child(#{$i}) {
animation-delay: -59.85s;
}
#dna div:nth-child(#{$i})::before {
animation-delay: -59.85s;
}
#dna div:nth-child(#{$i})::after {
animation-delay: -59.85s;
}
@-webkit-keyframes rotation {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(359deg);
}
}
The challenge I'm facing now is finding a way to incrementally add 15 seconds to the -59.85 second animation delay with each iteration of the loop. Since this is new territory for me in working with CSS capacities like this, I'm unsure about where to begin.
Any guidance or assistance on how to achieve this would be greatly appreciated!