Как анимировать линии css, @keyframes

Question

подскажите пожайлуйста как анимировать эти палочки чтобы они по очереди сверху вниз появлялись, уже всё перепробывал, ставил задержку нижней на 1s больше но получается фигня какая то, или может где есть готовое решение?

Answer 1

body { background-image: url(https://i.stack.imgur.com/tWGMC.jpg); }

.lines {
  width: 640px; height: 265px;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 100% 16px, 100% 13px, 100% 11px, 100% 8px, 100% 4px;
  background-position: 0 0, 0 65px, 0 130px, 0 195px, 0 260px;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #fff0 0 0, #fff 1px); mask-image: linear-gradient(to bottom, #fff0 0 0, #fff 1px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-size: 100% 275px; mask-size: 100% 275px;
  transition: 0.8s ease;
}

.lines:hover {
  -webkit-mask-position: 0 275px; mask-position: 0 275px;
}

<div class="lines"></div>

БЛОГ НА HUSL

Как анимировать линии css, @keyframes

Ответы (1 шт):