Question

我正准备一个包含@keyframe动画的网络。为了获得目前所需的效果，我有以下代码......

的index.htm

<article>
    <div>Section 1</div>
    <div>Section 2</div>
    <div>Section 3</div>
    <div>Section 4</div>
    ...
</article>

的style.css

article {
    ...
}
        article > div {
            background-color: lightblue;
            display: block;
            height: 50px;
            width: 100%;
            /**/
            animation-name: animation-example;
            animation-duration: 0.5s;
            animation-iteration-count: 1;
        }
                    article > div:nth-of-type(1) {
                        animation-delay: 0.0s;
                    }
                    article > div:nth-of-type(2) {
                        animation-delay: 0.2s;
                    }
                    article > div:nth-of-type(3) {
                        animation-delay: 0.4s;
                    }
                    article > div:nth-of-type(4) {
                        animation-delay: 0.8s;
                    }
                    ...

如您所见，每个<div></div>节点具有相同的动画，但是具有不同的延迟，增加0.2秒。

问题是，纯CSS中的，是否有可能＆＃34; regex-it＆＃34;以某种方式使它适用于放置在那里的每一件物品，而不必为每一件物品设置它？

如果在纯CSS中不可能，是否可以在任何CSS元语言中实现这一点，如SASS，LESS，......？

如果也没有，最好的方法是什么？（JavaScript，PHP，...）

提前致谢。

编辑：我选择了较少的问题，因为它距离我的需求最近。说，我可能会去@Raymond Nijland's answer并使用PHP来设置这些特殊的CSS变量。

Answer 1

虽然在纯CSS中不可能，但你可以使用递归mixin在LESS中完成：

.generate-delays(10); // 10 would be your maximum number of items
                      // - set higher if needed

.generate-delays(@n, @i: 1) when (@i =< @n) {
  article>div:nth-of-type(@{i}) {
    animation-delay: ((@i - 1) * 0.2s);
  }
  .generate-delays(@n, (@i + 1));
}

有没有办法让regexp CSS根据位置增加属性值？

1 个答案: