CSS3 动画问题

Question

Trying to have three elements show up one after the other on the page but the following happens.

All three elements appear, the first element doesn't do anything (it appears to have already gone through it's animation) Then the second element disappears and then starts it's animation and then the same thing for the third element.

Here's my code, what am I missing here:

@-webkit-keyframes reset {
    0% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes fade-in {
0% { opacity: 0; -webkit-transform: scale(.1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1);}
}


.fade-in {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}

.fade-in.one {-webkit-animation-delay: 0, .5;}
.fade-in.two {-webkit-animation-delay: 0, 1.5s;}
.fade-in.three {-webkit-animation-delay: 0, 2.5s;}

Thanks in advance

Answer 1

The main problem with your code is that you are missing the time unit...

.fade-in.one {-webkit-animation-delay: 0, .5s;}

While testing your code I took the liberty to simplify it a bit. There is no need to have two separate animations, there is a little known property called -webkit-animation-fill-mode that will allow your animation to remain in its last state. Here is my refactored version:

@-webkit-keyframes fade-in {
    0% { opacity: 0; -webkit-transform: scale(.1);}
    85% {opacity: 1; -webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(1); opacity: 1;}
}

.fade-in {
  -webkit-animation: fade-in .5s ease-in;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  opacity: 0;
}

.fade-in.one {-webkit-animation-delay: .5s;}
.fade-in.two {-webkit-animation-delay: 1.5s;}
.fade-in.three {-webkit-animation-delay: 2.5s;}

You can check it out here:

http://jsfiddle.net/vqfj7/