延迟每个子元素的CSSanimation

我试图通过对每个子元素应用animation来创build级联效果。 我想知道是否有更好的办法做到这一点:

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

等等…所以基本上,我想要为每个孩子开始一个animation,但延迟。 感谢您的任何意见!

另外:也许我没有正确解释我的担心:不pipe我有多less孩子,如何做到这一点。 如何做到这一点,而不必写下每个孩子的财产…例如,当我不知道会有多less孩子。

5 Solutions collect form web for “延迟每个子元素的CSSanimation”

你想要的是animation延迟属性。

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

attrcalc 完全支持的情况下,希望在未来的将来,我们将能够在没有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)); } 

这将创build一个效果,其中每个列表项animation显示为随机顺序。

如果你有很多的项目(例如:我有分页的表> 1000个项目,并希望每页行加载页面时延迟),你可以使用jQuery来解决这个问题,避免css文件的大小上升。 animation延迟dynamic增加。

 $.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”是animationtypes,“400” – animation执行时间,500页面上的每个元素延迟animation。

您也可以使用CSS中的transition-delay属性,并使用JS或JQuery为每个子元素分配不同的延迟。 (假设以秒为单位的启动延迟)

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

所以,孩子们会有1 * s,2 * s,3 * s等等的过渡延迟。 现在要创build实际的animation效果,只需设置所需的转换,然后按顺序对子项进行animation处理。 奇迹般有效 !

喜欢这个:

 .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...] 
  • 为什么Firefox的flex项目没有百分比填充/边距?
  • 标题的底部边框小于宽度
  • 透明文本剪出背景
  • flex-wrap如何与align-self,align-items和align-content一起工作?
  • 柔性容器中的高度相等的行
  • CSS3 Flexbox保持图像宽高比
  • 强迫孩子服从CSS中父母弯曲的边界
  • 如何在CSS中旋转文本
  • 如何水平居中字体真棒图标?
  • 如何在Flexbox中垂直alignment文本?
  • jQuery的点击事件不能在iOS中工作