Question

我希望在没有任何JS的情况下为一些面板制作动画。我想要创建的效果类似于：http://www.sequence.co.uk/case-studies/

我有关于正确的动画，我可以在火灾中看到每个li都有使用n-child的延迟，但交错延迟不起作用。

见下面的代码：

@-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);
      }
   }
 }

Answer 1

原来我正在使用'transition-delay'，我需要的是'动画延迟'。现在有效。见http://codepen.io/bakers37/pen/myKPjV

@-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);
      }
   }
}

使用nth-child的CSS3动画延迟 - Sass / Compass

1 个答案: