I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snippet, but regardless, here is where I think I may have gone wrong:
@keyframes FadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.masonry {
display: flex;
}
.item {
animation: FadeIn 0.5s linear;
}
@for $i from 1 through 20 {
.item > .cld-image > img:nth-child(#{$i}) {
animation-delay: 1000ms * $i;
}
}<div class="masonry">
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
<div class="item">
<div class="cld-image">
<img src="https://picsum.photos/200" />
</div>
</div>
</div>