延迟每个子元素的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孩子。
你想要的是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>
在attr和calc 完全支持的情况下，希望在未来的将来，我们将能够在没有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...]
