我想为项目列表制作动画。第一个动画应延迟 0 毫秒，第二个动画应延迟 50 毫秒，第三个动画延迟 100 毫秒，依此类推。该列表是动态的，所以我不知道长度。
这可能吗？注意：我不需要具体的动画/关键帧帮助，但如何使用 nth-child 或 nth-of-type （或其他什么？）来实现基于兄弟姐妹之间的相对位置的渐进式动画延迟。
我正在使用 React / SASS / Webpack 如果有帮助的话。如有必要，我可以使用 jQuery，但如果可能的话，我宁愿避免使用它。
下面是一个关于如何使用纯 CSS 执行此类操作的示例。
您可以轻松地更改它以满足您的需要。
$(document).ready(function() {
$('.myList img').each(function(i){
var item = $(this);
setTimeout(function() {
item.toggleClass('animate');
}, 150*i);
})
});
@keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.myList img {
float: left;
margin: 5px;
visibility: hidden;
}
.myList img.animate {
visibility: visible;
animation: FadeIn 1s linear;
animation-fill-mode:both;
animation-delay: .5s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myList">
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
<img src="http://placehold.it/350x30" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
