CSS Animation not playing when encapsulate

Question

I'm trying to add a link to my social networks icons (see code here : https://codepen.io/denis-h-non/pen/ExjrgYP ) So I encapsulated my into a but when I do this the css delay(code below) is not working anymore so they're appearing at the same time. It works again if I delete the tag, what can I do? Thanks in advance,

.container i:nth-of-type(1) {
  -webkit-transition-delay: 1.1s;
  transition-delay: 1.1s;
}

.container i:nth-of-type(2) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

Answer 1

Since you placed the icons inside the anchors, than you need to change the css this way:

.container a:nth-of-type(1) i {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.container a:nth-of-type(2) i {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

Why? Because:

The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.

Docs here.