CSS3使用第n个子级的动画延迟-Sass/Compass

我正在寻找动画一些面板没有任何JS。我想要创建的效果与此类似：

我得到了正确的动画，我可以在FireBug中看到，每个li使用第n个子元素都有自己的延迟，但交错延迟不起作用

见下面的代码：

---

原来我用的是“过渡延迟”，我需要的是“动画延迟”。现在起作用了。看

---

规避“链接到codepen必须在问题中包含代码”规则并不明智。这是有原因的。当codepen关闭时，这个问题对其他人没有帮助。它。。它甚至没有那么多代码。我不明白为什么不包括在问题中？那么，到底是什么问题？代码有效吗？因此，对于含糊不清的“整理我的代码plz”问题，这不是一个合适的地方。我们已经更新了代码，并试图更具体地说明这个问题。

@-webkit-keyframes flip { 
 0% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flip { 
 0% {
    transform: rotateY(-180deg);
    opacity: 0.5;
 }
 100% {
    transform: rotateY(0deg);
    opacity: 1;
 }
}
li
{
    width: 200px;
    height: 200px;
    display: inline-block;
    background: #ccc;
    margin: 10px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation-name: flip;
    animation-name: flip;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    // Loop through the items and add some delay.
  @for $i from 1 through 20 {
      &:nth-child(#{$i}) { 
        @include transition-delay(1s * $i);
      }
   }
 }

@-webkit-keyframes flip { 
0% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    opacity: 0.5;
}
100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}
}
@keyframes flip { 
0% {
    transform: rotateY(-180deg);
    opacity: 0.5;
}
100% {
    transform: rotateY(0deg);
    opacity: 1;
}
}

li
{
    width: 200px;
    height: 200px;
    display: inline-block;
    background: #ccc;
    margin: 10px;
     opacity: 0.5;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-animation-name: flip;
    animation-name: flip;

    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

    // Loop through the items and add some delay.
  @for $i from 1 through 20 {
      &:nth-child(#{$i}) { 
         -webkit-animation-delay: (0.2s * $i);
        -moz-animation-delay: (0.2s * $i);
        animation-delay: (0.2s * $i);
      }
   }
}