CODEWITHSUNDEEP
csscss-animations
Paul Diamant
Paul Diamant

Reputation: 189

CSS animation-delay doesn't apply to all elements

As you can see i'm applying a delay to even and odd nth-of-type, but the problem is that the delay is always the same for both, no matter what. So if I put 10 seconds on odd and 3 seconds on even, it'll be 10 seconds for all a links.

a {
          position: relative;
          line-height: 200%;
          display: inline-block;
          text-transform: uppercase;
          font-size: $header-link-size;
          transform: scale(0);
          animation: scaleIn .5s;
          animation-fill-mode: both;

          &:nth-of-type(even) {
            animation-delay: 2s;
          }

          &:nth-of-type(odd) {
            animation-delay: 3s;
          }

          @keyframes scaleIn {
            from {
              transform: scale(0);
            }
            to {
              transform: scale(1);
            }
          }
}

Upvotes: 1

Views: 187

Answers (1)

Marvin
Marvin

Reputation: 10142

The nth-of-type()-selector will match any element that is the nth child of a type inside the same parent element (we talk about siblings). It won't work for nested elements. So regarding your markup every <a> inside of a <li> is the only one, thus it is always odd and the animation-delay is the same for all.

You have to select even and odd <li> elements and add the animation-delay to their links.

a {
  position: relative;
  line-height: 200%;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1em;
  transform: scale(0);
  animation: scaleIn .5s;
  animation-fill-mode: both
}
li:nth-of-type(even) a {
  animation-delay: 1s
}
li:nth-of-type(odd) a {
  animation-delay: 2s
}
@keyframes scaleIn {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
<ul>
  <li><a class="active" href="">Home</a>
  </li>
  <li><a href="">Portfolio</a>
  </li>
  <li><a href="">About</a>
  </li>
  <li><a href="">Contact</a>
  </li>
</ul>

Upvotes: 3

Related Questions