有什么方法可以根据他们的位置正则表达式 CSS 来增加属性值吗？

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.2s。

问题是，在纯 CSS 中，是否可以 "regex-it" 以某种方式使其适用于放置在那里的每个项目而无需设置每个人都有吗？

如果无法在纯 CSS 中实现，是否可以在任何 CSS 元语言中实现，例如 SASS、LESS、...？

如果还是不行，最好的办法是什么？ (JavaScript, PHP, ...)

提前致谢。

编辑：我选择了 LESS 问题，因为它最接近我的需要。话虽如此，我可能会选择并使用 PHP 来设置这些特殊的 CSS 变量。

Answer 1

虽然这在纯 CSS 中是不可能的，但您可以使用递归混合在 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));
}

有什么方法可以根据他们的位置正则表达式 CSS 来增加属性值吗？

Is there any way to regexp CSS to increase a property value depending on their position?

css

keyframe

css-animations

有什么方法可以根据他们的位置正则表达式 CSS 来增加 属性 值吗？

Is there any way to regexp CSS to increase a property value depending on their position?

css

keyframe

css-animations

有什么方法可以根据他们的位置正则表达式 CSS 来增加属性值吗？