Почему nth-child с transition-delay не работает? - PullRequest
Новая
       2

Почему nth-child с transition-delay не работает?

1 голос
/ 11 марта 2020

Мне нужно, чтобы эти значки перемещались в разные периоды времени снизу вверх.

Вот код: 

.social-media {
  transition: 0.3s;
}

.social-media ul li {
  transform: translateY(-50px);
  display: inline-block;
}

.social-media ul li a {
  color: #fff;
  font-size: 15px;
  margin: 0 5px;
  transition: 0.3s;
}

.social-media {
  position: relative;
  bottom: -30%;
  transition: 0.3s;
}

.card:hover .social-media {
  bottom: 0%;
}

.card:hover .social-media li:nth-child(1) a {
  transition-delay: 0.5s;
}

.card:hover .social-media li:nth-child(2) a {
  transition-delay: 1s;
}

.card:hover .social-media li:nth-child(3) a {
  transition-delay: 2s;
}
<div class="card">
  <div class="poza">
    <img src="poze/1.jpg" alt="">
  </div>
  <div class="social-media">
    <ul>
      <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    </ul>
  </div>
</div>
...