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

【问题标题】：CSS3 keyframe animation including delay, toggled with JSCSS3 关键帧动画，包括延迟，用 JS 切换
【发布时间】：2013-11-01 11:31:35
【问题描述】：

我正在尝试为 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}

但这不起作用。不幸的是我不知道我做错了什么......：/

【问题讨论】：

标签： css css-animations keyframe

【解决方案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 个子选择器！

我希望这个答案不会太晚！

【讨论】：