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

时间:2018-02-17 12:00:06

标签: css css3 css-animations keyframe

我正准备一个包含@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变量。

1 个答案:

答案 0 :(得分:0)

虽然在纯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));
}