CSS计数器和动画延迟

Question

我想知道是否有一个简单的CSS解决方案来根据元素的数量制作动画延迟。我尝试过这样的事情。

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有没有人有一个不包含javascript或多个css类的解决方案？