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

Posted 2023-03-06

【中文标题】如何在未知数量的元素之间为CSS设置动画[重复]

【英文标题】：How to animate CSS with a delay between an unknown number of elements [duplicate]

【发布时间】：2016-09-19 03:39:00

【问题描述】：

我是 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/

【问题讨论】：

你可能想使用javascript？

@vahid 嗨！是的，javascript没问题！但是如何..：D

【参考方案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 秒。

【讨论】：

嗨@mmgross 首先，感谢您的时间！我测试了解决方案 2（因为在这里测试更简单） - 它的工作 99% ok。我只是不知道为什么淡入淡出效果来自右侧（我不知道我是否清楚......）放大来自右到中心 - 而不是中心到中心.. - jsfiddle.net/mydjnfLn/2 我将测试解决方案 1现在！非常感谢！

嗨 @mmgross 我也测试了解决方案 1 - 100% 正常工作！伟大的！但是 - 如果我理解解决方案，CSS 控件在这里不起作用，对吧？这对我来说是个问题，因为 FadeIn 是一个简单的动画 - 作为初学者，我了解 JS FadeIn 的逻辑 - 但是使用 CSS 我可以创建更灵活的动画，如弹跳、翻转、无限动画、交替..

1.您的代码中有一个未关闭的<strong>-tag，但这不是问题。 2. jsfiddle 为.show 类定义了一些自己的样式，这弄乱了我的代码。如果你运行上面的代码 sn-p 你会发现它可以工作。如果您想在 jsfiddle 中使用该代码，请将 .show 重命名为其他名称（在 js 中两次，在 css 中一次）

是的！我看到了代码 sn-p.. 我现在直接在我的项目上尝试..

jsfiddle.net/mmgross/mydjnfLn/3

【参考方案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 

以下是我发现的问题：

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

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

【讨论】：

tks @mrfour - 你是对的！非常感谢您的帮助！

【参考方案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;
);​

【讨论】：

嗨@Tanvi-B，谢谢！但由于某种原因，这个脚本不适合我。所有元素都有动画（好的）-但是，我没有 3s 延迟。所有动画同时发生。

你能试试我编辑的函数吗？我通过增加 i+3000 增加了 3 秒的延迟

不..同样的问题..没有延迟..我尝试了一些变化..但也没有延迟..如果我在 CSS 中输入： .IconAnimate i:nth-child(1) 动画-delay: 3s 与相应的元素编号和延迟 - 它的工作正常。 （然后CSS很好）。但是，使用 js.. 所有元素都被动画化了.. 没有延迟..