Sequential Actions for things like links, svgs, cards, etc.
Usually in conjunction with “nth-child.” Better to use an index than a hardcoded number in case the number of menu items changes.
DevEd example here that uses the transition property and animation delay value to stagger in. The effect itself is on a “fade” class but it’s the transition that helps the sequence.
.navLinks li:nth-child(1) {
transition: all 0.5s ease 0.2s
}
.navLinks li:nth-child(1) {
transition: all 0.5s ease 0.4s
}
.navLinks li:nth-child(3) {
transition: all 0.5s ease 0.6s
}
li.fade {
opacity: 1;
}
Fireship animation video
50 Projects Video