CSS3 animation delay using nth-child - Sass/Compass

Question

I'm looking to animate some panels without any JS. The effect I want to create is similar to this: http://www.sequence.co.uk/case-studies/

I've got the animation about right and I can see in fire-bug that each li has its own delay using nth-child BUT the staggered delay isn't working.

See code below:

http://codepen.io/bakers37/pen/KwoNvB

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

Circumventing the "links to codepen must include code in the question" rule is not cute. It is there for a reason. This question is not helpful to others when codepen goes down. — cimmanon, Feb 17 '15 at 18:04
it.. it isn't even that much code either. I don't understand why it wasn't included in the question? — rlemon, Feb 17 '15 at 18:26
So, what's the problem exactly? Does the code work? SO is not the appropriate place for vague "tidy my code plz" questions. — cimmanon, Feb 17 '15 at 22:31
Have updated the code and tried to be more specific about the issue. — vibesniper, Feb 18 '15 at 12:06

score 1 · Answer 1 · answered Feb 26 '15 at 15:52

Turns out I was using 'transition-delay' and what I needed was 'animation-delay'. Now works. See 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);
      }
   }
}

CSS3 animation delay using nth-child - Sass/Compass

1 Answers1