Seeking to add animations to various div elements with unique delay times, I encountered a puzzling issue. Despite following online tutorials closely (such as this one), the animation delays remain consistent for all divs.
The loop I have is as follows:
@for $i from 1 through 5 {
#contact-grid .contact-item .contact-link:nth-child(#{$i}) {
@include textShakeAnimation($delay: #{$i}s);
}
}
Utilizing this animation mixin:
@mixin textShakeAnimation($delay) {
transform-origin: center;
animation-name: text-shake;
animation-duration: 8s;
animation-delay: $delay;
animation-iteration-count: infinite;
}
@keyframes text-shake {
0% {transform: rotate(0deg);}
2% {transform: rotate(5deg);}
4% {transform: rotate(-5deg);}
6% {transform: rotate(5deg);}
8% {transform: rotate(-5deg);}
10% {transform: rotate(5deg);}
12% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}
Upon inspecting the HTML structure, it appears that despite the loop cycling through indexes 1 to 5, all divs' animation delays are set to 3, right in the middle of the range.
Interestingly, when examining the generated CSS code, correct animation delays are observed:
#contact-grid .contact-item .contact-link:nth-child(1) {
transform-origin: center;
animation-name: text-shake;
animation-duration: 8s;
animation-delay: 1s;
animation-iteration-count: infinite; }
...
The animations function correctly, but the delay timings are not assigned as intended. Any insights or guidance on resolving this issue would be greatly appreciated. Thank you.