CSS3 关键帧动画包括延迟，用 JS 切换

Question

我正在尝试为 3 个按钮设置动画(淡入)。这是我的 html:

<aside>
  <p><a href="#"><i class="icon-facebook"></i> Share</a></p>
  <p><a href="#"><i class="icon-twitter"></i> Tweet</a></p>
  <p><a href="#"><i class="icon-envelope"></i> Mail</a></p>
</aside>

这是我的 css(类 .aside-check 由 javascript 应用)

.aside-check {
     animation: fadein 2s;
}

@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}

我现在想要的是，让每个段落都有一点延迟，我试过了

p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}

但这行不通。不幸的是我不知道我做错了什么...:/

Answer 1

好吧，首先您需要将动画应用到段落而不是旁边。永远记住，动画不会继承。其次，不要忘记你的 webkit 前缀!这很痛苦，但 webkit 浏览器仍然需要 -webkit- 在所有动画属性和关键帧定义之前。没有它，您的动画将无法在 Chrome、Safari、Android 等上运行(如果您不记得是否需要前缀，请查看 caniuse.com http://caniuse.com/#feat=css-animation)

另请注意，如果您希望段落先隐藏再显示，您需要将它们定义为不透明度为 0，然后将“动画填充模式”设置为转发，以便“到”帧中的属性动画结束后坚持。

我用一个工作示例做了一些 JS 摆弄，希望对您有所帮助!

http://jsfiddle.net/Ashwell/HqBZU/

以下是重要的部分:动画应用于具有填充模式设置和起始不透明度的段落。

.aside-check > p{
    animation: fadein 2s;
    -webkit-animation: fadein 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    opacity: 0;
}

您还需要 webkit 关键帧

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

并且不要忘记将 -webkit-animation-delay: 2s; 添加到每个具有尊重延迟时间的第 n 个子选择器中!

我希望这个答案不会来得太晚!