如何在未知元素数之间延迟动画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) -好吗？

每一行都有一个向下滚动的动画(由“动画元素左侧”创建)

换句话说，如果我向下滚动浏览器，行将是动画的。

到现在为止-没问题。

现在我想动画图标(在本例中是“FA-商标”图标)。

用FadeIn动画。

但是..。

我的问题是：

如何在每个图标之间延迟3s来动画每个图标？

我拿到了这个：

@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:为了演示目的，我在两个示例中将延迟设置为1秒，只需将1000替换为3000以获得3秒。

Answer 2

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

固定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. 似乎您错过了强标记的结束标记，这导致":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;
});​