Sequential Actions for things like links, svgs, cards, etc.

Links

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;
}

SVGs

Fireship animation video

Cards

50 Projects Video