Sequential Actions


Updated Oct 14th, 2021

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