如何在未知数量的元素之间为CSS设置动画[重复]

Question

我是 CSS 动画的初学者。

我连续有很多元素（使用引导程序 - 然后每个分辨率的元素数量不同）

<div class="row IconAnimate">

   <div class="col-xs-12 col-sm-4 col-lg-2">
     <div><i class="fa fa-trademark fa-3x"></i>
       <h4><strong>TITLE 1</h4>
       <p>BLA BLA BLA</p>
    </div>
   </div>

   <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
   </div>  

</div>

有了这个，我有 6、3 和 1 个元素的行。 （col-xs-12、sm-4 和 lg-2）- 好吗？

每一行都有一个向下滚动动画（由“animation-element side-left”创建）

换句话说，如果我向下滚动浏览器，该行将被动画化。

到目前为止 - 没有问题。

现在我想为图标设置动画（在本例中为“FA-TRADEMARK”图标）

带有淡入动画。

但是..

我的问题：

如何在每个图标之间延迟 3 秒为每个图标设置动画？

我知道了：

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

.IconAnimate i { animation: FadeIn 1s linear; animation-fill-mode:both; }
.IconAnimate i:nth-child(1){ animation-delay: 3s }
.IconAnimate i:nth-child(2){ animation-delay: 6s }
.IconAnimate i:nth-child(3){ animation-delay: 9s }
.IconAnimate i:nth-child(4){ animation-delay: 12s }

但是通过这段代码我得到了动画，但是，我需要知道我在一行中有多少个元素。

如果我不知道每行有多少元素，有没有办法制作动画？

JSFIDDLE：https://jsfiddle.net/mydjnfLn/

Answer 1

解决方案 1：没有 CSS 的 jQuery

你可以使用jQuery的animate和delay函数来实现，很简单，代码如下：

$('.IconAnimate i').each(function(i) {
  $(this).css('opacity', 0);
  $(this).delay(1000 * i).animate({
    'opacity': 1.0
  }, 450);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="row IconAnimate">

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-trademark fa-3x"></i>
      <h4><strong>TITLE 1</h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

</div>

当然这只是一个例子，我留给你去弄清楚你必须为动画制作哪些属性以及如何获得所需的效果。

解决方案 2：jQuery/纯 javascript 和 CSS 动画

在我看来，更通用的解决方案是使用 CSS 类来启用动画并通过 javascript 将此类动态添加到您的 i 元素中。虽然您可以根据需要使用 jQuery，但您不必这样做，代码很简单，可以使用纯 javascript 来完成：

function animateNext() {
  var elements = document.querySelectorAll('.IconAnimate i:not(.show)');
  if (elements.length) {
    elements[0].classList.add('show');
    setTimeout(animateNext,1000);
  }
}

animateNext();

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

.IconAnimate i {opacity:0;}
.IconAnimate i.show { opacity:1;animation: FadeIn 1s linear; animation-fill-mode:both;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="row IconAnimate">

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-trademark fa-3x"></i>
      <h4><strong>TITLE 1</h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
  </div>

</div>

PS：出于演示目的，我在两个示例中都将延迟设置为一秒，只需将 1000 替换为 3000 即可获得 3 秒。

Answer 2

我在您的 JSFiddle 中发现了一些问题，并进行了一些更改。

Fixed JSFiddle

HTML 部分

<div class="row">
   <div class="IconAnimate col-xs-12 col-sm-4 col-lg-2">
     <div><i class="fa fa-trademark fa-3x"></i>
     <h4><strong>TITLE 1</strong></h4>
       <p>BLA BLA BLA</p>
    </div>
   </div>

   <div class="IconAnimate col-xs-12 col-sm-4 col-lg-2">
    <div><i class="fa fa-paint-brush fa-3x"></i> 
      <h4><strong>TITLE 2</strong></h4>
      <p>BLA BLA BLA</p>
    </div>
   </div>  
</div>

CSS 部分

.IconAnimate i { animation: FadeIn 1s linear; animation-fill-mode:both; }
.IconAnimate:nth-child(1) i { animation-delay: 1s }
.IconAnimate:nth-child(2) i { animation-delay: 2s }
.IconAnimate:nth-child(3) i { animation-delay: 3s }
.IconAnimate:nth-child(4) i { animation-delay: 4s }

以下是我发现的问题：

1. 好像你漏掉了strong标签的结束标签，导致“:nth-child”不能正常工作

2. .IconAnimate i:nth-child(1)，此选择器选择每个 i 元素，它是其父元素的第一个子元素，而不是第一个 .IconAnimate 元素的 i 元素。所以你的动画总是和 3s 延迟一起触发。

Answer 3

我遇到了同样的问题，我用下面的方法解决了

$.each($('.IconAnimate '), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));
//add delay 3s 
i+3000;
});​