无限数量元素的CSS顺序动画级联

前端之家收集整理的这篇文章主要介绍了无限数量元素的CSS顺序动画级联前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

据我所知,获取级联动画的常用方法是:

.Box {
    animation: someAnimation 3s linear 0s 1 normal none;
}

然后,如果我想实现级联(顺序)效果

.Box:nth-child(1) {
    animation-delay: 0s;
}

.Box:nth-child(2) {
    animation-delay: 0.5s;
}

.Box:nth-child(3) {
    animation-delay: 1s;
}

etc...

通常,这可以通过mixin自动使用LESS或SASS进行,该mixin为N个元素输出.

问题是:如何在CSS中为无限量的元素执行此操作?
换句话说,如何在不指定每个孩子的延迟的情况下制作级联动画?

最佳答案
实际上,您将始终拥有有限数量的元素.真正的问题是你不知道你将拥有多少箱子.

无论你有静态或动态数量的盒子,你应该(我认为你已经是)以编程方式创建它们,如果金额足够的话.您可以使用PHP,或javascript或许多其他框架.一旦以编程方式创建框,只需使用style属性指定创建元素时的延迟.

代码

for(n = 0; n < numBox; ++n){
    echo "
原文链接:https://www.f2er.com/css/427193.html

猜你在找的CSS相关文章