每个子元素都有延迟的 CSS 动画答案

【问题标题】：CSS Animations with delay for each child element每个子元素都有延迟的 CSS 动画
【发布时间】：2012-01-07 19:50:48
【问题描述】：

我正在尝试通过对每个子元素应用动画来创建级联效果。我想知道是否有比这更好的方法：

.myClass img:nth-child(1){
    -webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
    -webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
    -webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
    -webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
    -webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}

等等…… 所以基本上，我想为每个孩子制作一个动画，但有延迟。感谢您的任何意见！

补充：也许我没有正确解释我的担忧：无论我有多少孩子，我都应该如何做到这一点。如何在不必为每个孩子写下属性的情况下做到这一点......例如，当我不知道会有多少孩子时。

【问题讨论】：

如何使用一些 js 元素选择器（比如 dojo.query 或 jquery）并在 for 循环中应用样式？这就是我唯一想到的......
是的，我想这是为每个孩子做这件事的唯一方法，而不必为每个孩子写下一节课。我认为可能会有一些新的 CSS3 属性使它成为可能，但我想我将不得不等待变量的引入......谢谢！
所以你在寻找某种 increment property 的 CSS 动画？像-webkit-animation-increment 这样的东西？那肯定有用，好问题。
@Ed-M 完全正确！我只是在看那个反增量属性，如果像这样的变量可以在任何 css 属性定义中使用，而不仅仅是“内容”属性，那就太好了……

标签： animation css delay css-selectors

【解决方案1】：

像这样：

.myClass img {
    -webkit-animation: myAnimation 0.9s linear forwards;
}

.myClass img:nth-child(1){
    -webkit-animation-delay: 0.1s;
}

.myClass img:nth-child(2){
    -webkit-animation-delay: 0.2s;
}

[...etc...]

【讨论】：

嗨，感谢您的简化 :) 实际上，我更关心的是持续增加 0.1 秒的延迟而不是简化课程本身。但是，当然，这是写下来的更好方法，谢谢！
哦，好吧，我的错。好吧，你可以用 Javascript 来做，为每个循环做一个。但我不会推荐它...

【解决方案2】：

您想要的是animation delay 属性。

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }

<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

Less.js 或 Sass 等 CSS 预处理器可以减少重复次数，但如果您正在处理未知数量的子元素或需要为大量子元素设置动画，那么 JavaScript 将是最佳选择。

【讨论】：

@dreamster：旧的 Fiddle 使用 -webkit 前缀（Chrome 仍然支持）。您需要添加非前缀版本（或使用类似 autoprexfixer (github.com/postcss/autoprefixer) 如果您希望它工作。

【解决方案3】：

如果你有很多项目（例如：我有超过 1000 个项目的分页表，并且希望在页面加载时每行都延迟动画），你可以使用 jQuery 来解决这个问题并避免 css 文件出现尺寸。动画延迟动态增加。

$.each($('.myClass'), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));

});

编辑： 这是我调整为与 animate.css 一起使用的相同代码（在使用之前安装附加插件 https://gist.github.com/1438179 ）

$.each($(".myClass"), function(i, el){
    $(el).css("opacity","0");
    setTimeout(function(){
       $(el).animateCSS("fadeIn","400");
    },500 + ( i * 500 ));

});

其中“fadeIn”是动画类型，“400” - 动画执行时间，500 - 页面上每个元素的动画延迟。

【讨论】：

我认为这个答案违背了所要求的精神，即通过 CSS 动画与 JavaScript/jQuery 动画来实现的方法。

【解决方案4】：

在 [希望不久的] 将来，当 attr 和 calc 得到完全支持时，我们将能够在不使用 JavaScript 的情况下完成此任务。

HTML：

<ul class="something">
    <li data-animation-offset="1.0">asdf</li>
    <li data-animation-offset="1.3">asdf</li>
    <li data-animation-offset="1.1">asdf</li>
    <li data-animation-offset="1.2">asdf</li>
</ul>

CSS：

.something > li
{
    animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}

这将产生一种效果，其中每个列表项以看似随机的顺序进行动画处理。

【讨论】：

TBH 我预计像.myClass li:nth-child(n) { transition-delay: calc(n*0.2s); } 这样的东西会非常方便。
我的意思是说我希望 w3 可以在未来实现带有变量的 nth-child 函数，所以我们可以说 transition-delay for child(n) is 0.5+(n*<somePrimeNumber> % 1.5) 它不是一个奇妙的公式，而是对于您可能添加的任何数量的 li，看起来都是随机的。我的抱怨是必须为每个列表项创建几个 CSS 选择，然后每当我得到一个比我的 CSS 准备的更大的列表时必须扩展它，SCSS 和 LESS 上有随机函数，但问题很离题，所以我的挫败感无法用纯 CSS 来解决。
我的观点是：CSS 应该涵盖所有的视觉效果，这就是它的目的，但有时我们还是忍不住需要使用 JS 来实现我们想要的图形效果。是的，这看起来是随机的，但是在多次运行该动画后，你的眼睛会开始预测它，它看起来不再是随机的了。
用户可能不会注意到。这就像电影花絮——很少有人注意到它们。不过，伪随机性是 felt。
有一天，我们将能够写counter-increment: animation-offset; animation-delay: calc(0.1s * counter-value(animation-offset));，但世界还没有为此做好准备?

【解决方案5】：

您也可以利用 CSS 中的 transition-delay 属性，使用 JS 或 JQuery 为每个子元素分配不同的延迟。（假设 s 是以秒为单位的启动延迟）

$(".myClass img").each(function(index){
     $(this).css({
          'transition-delay' : s*(1+index) + 's'
     });
 });

所以，孩子们会有像 1*s, 2*s, 3*s .....等等这样的转换延迟。现在要创建实际的动画效果，只需设置所需的过渡，孩子将按顺序制作动画。像魅力一样工作！

【讨论】：

我认为在性能方面这是本页面上最好的解决方案，因为它仍然可以让动画本身完全通过 css 完成。此外，它还可以防止文件膨胀和不必要的难以辨认。

【解决方案6】：

这是一种使用 for 循环的 scss 方法。

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

【讨论】：

干得好@robhearing 但我不能做到 100 它不能正常工作
在 10 条记录 ${{i}} 值应该从 0（零）开始后你能帮忙吗？