Here is some Stylus code I'm working with:
for i in (1..3)
.l:nth-child({i})
opacity (i / 5)
When executed, the output looks like this:
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
While this output is good, I am looking to modify it so that the opacity starts at 0 and is set dynamically after using @keyframes;
@keyframes o
0%
opacity 0
100%
for i in (1..3)
opacity (i / 5)
The result obtained from this approach is not what I expected:
100% {
opacity: 0.2;
opacity: 0.4;
opacity: 0.6;
}
I am unsure how to achieve my desired result, do I need to utilize a function? Thank you for your help! The desired outcome should resemble the following:
100% {
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
}