CSS3 动画问题

Question

试图让三个元素一个接一个地显示在页面上，但发生了以下情况。

所有三个元素都出现了，第一个元素没有做任何事情（它似乎已经完成了它的动画）然后第二个元素消失了，然后开始它的动画，然后第三个元素也是一样的。

这是我的代码，我在这里缺少什么：

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

提前致谢

Answer 1

您的代码的主要问题是您缺少时间单位...

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

在测试您的代码时，我冒昧地对其进行了一些简化。没有必要有两个单独的动画，有一个鲜为人知的属性叫做 -webkit-animation-fill-mode 可以让你的动画保持在最后一个状态。这是我的重构版本：

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

您可以在这里查看：

http://jsfiddle.net/vqfj7/