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（通过javascript应用.aside-check类）

.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定义它们，然后将“animation-fill-mode”设置为向前，以便“to”框架中的属性动画结束后坚持下去。

我用一个工作示例做了一个小小的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个子选择器中，并且延迟时间是合适的！

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

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

1 个答案: