CSS Counter and Animation delay

Asked Apr 16 '18 at 16:17

Active Apr 16 '18 at 16:21

Viewed 2,365 times

I wonder if there is a simple CSS solution to make an animation delay depending on the count of elements. I've tried something like this.

/* fade in from left */

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translateX(-20px)
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

ul {
  counter-reset: items;
}

li {
  counter-increment: items;
  animation: myAnimation;
  animation-delay: counter(items) * .2s;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Does anyone have a solution which does not include javascript or multiple css classes?

edited Apr 16 '18 at 16:21

j08691

204,283
31
260
272

asked Apr 16 '18 at 16:17

Pablo Christiano

Nope...not possible with CSS. – Paulie_D Apr 16 '18 at 16:23
If you want to avoid dirty and longish hacks that involve positioning with `nth-child` to declare all timings possible from 1 to infinity, the answer is no, i guess – Kaddath Apr 16 '18 at 16:30
2

possible duplicate of https://stackoverflow.com/questions/43539203/use-css-counter-in-calc – Naga Sai A Apr 16 '18 at 16:32
https://www.w3schools.com/css/css3_animations.asp try this – Bhavin Apr 16 '18 at 16:32
1

Not possible yet! Here's the full answer: https://stackoverflow.com/a/43540570/661643 – cronoklee Jun 03 '19 at 09:10

CSS Counter and Animation delay

0 Answers0