如何使用未知数量的元素之间的延迟来动画CSS

Question

我是CSS动画的初学者。

我连续多次使用（使用bootstrap - 然后每个分辨率的元素数量不同）

<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） - 好吗？

每一行都有一个SCROLL向下动画（由“动画元素左侧”创建）

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

直到现在 - 没有问题。

现在我想动画图标（在这种情况下是“FA-TRADEMARK”图标）

使用FadeIn动画。

但是...

我的问题：

如何在每个图标之间延迟3秒为每个ICON制作动画？

我明白了：

@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 }

但是使用这段代码我得到了动画，但是，我需要知道我在这行中有多少个。

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

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

Answer 1

解决方案1：没有CSS的jQuery

你可以使用jQuery的animate和delay函数来实现这一点，它非常简单，这里是代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当然这只是一个例子，我留给你来弄清楚你有什么属性来制作动画以及如何获得理想的效果。

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

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

＆＃13;

＆＃13;

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

animateNext();

＆＃13;

@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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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. 您似乎错过了强标记的结束标记，这导致了＆＃34; :nth-child＆＃34;无法正常工作

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

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;
});​