0

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

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

4

1 回答 1

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 个子选择器！

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

于 2013-11-01T03:31:35.410 回答