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