是否可以将nth-child值用作属性中的参数？ （如何）

Question

简短描述（tl; dr;）

在CSS属性中使用nth-child的值是否存在“纯CSS”方式（而不是Less / Sass）？像这样：

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

如果有，我该怎么办？如果没有，我怎么能以干净的方式模仿它？ （我确信我在这里过于复杂了）

---

详细说明

我正在创建一个简单的动画，其中字母在旋转时淡入。为此，我使用了javascript（与jQuery）和CSS的组合，但这产生了一些问题（见下文）;所以我试图转向仅限CSS的解决方案，并以大量规则结束。

这个（简化的）CSS对两个解决方案都很常见：

span.anim {
    font-size:30px;
    opacity:0;
    animation: anim 1s;
    animation-fill-mode: forwards;
}

@keyframes anim {
    from {
        transform: rotate(0deg);
        opacity:0;
    }
    to {
        transform: rotate(360deg);
        opacity:1;
    }
}

使用JavaScript + CSS

我的JavaScript代码如下所示：

var aux = $("#animate").text();
$("#animate").text("");

for (var x = 0; x < aux.length; x++) {
    setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
}

这很有效......除非用户移动到另一个标签，否则动画会混乱，结果是意外的。您可以在这个JSFiddle上看到它：http://jsfiddle.net/e7b9ygk4/（运行脚本，移动到另一个选项卡，几秒钟后返回）。

仅使用CSS

我可以通过破坏较小元素中的元素来实现相同的效果（这是我觉得我过于复杂的部分），然后将动画应用于具有不同延迟的每个元素：

span.anim:nth-child(1) { -webkit-animation-delay:0.5s; }
span.anim:nth-child(2) { -webkit-animation-delay:1.0s; }
span.anim:nth-child(3) { -webkit-animation-delay:1.5s; }
span.anim:nth-child(4) { -webkit-animation-delay:2.0s; }
span.anim:nth-child(5) { -webkit-animation-delay:2.5s; }
span.anim:nth-child(6) { -webkit-animation-delay:3.0s; }
span.anim:nth-child(7) { -webkit-animation-delay:3.5s; }
span.anim:nth-child(8) { -webkit-animation-delay:4.0s; }
span.anim:nth-child(9) { -webkit-animation-delay:4.5s; }
span.anim:nth-child(10) { -webkit-animation-delay:5.0s; }
span.anim:nth-child(11) { -webkit-animation-delay:5.5s; }
span.anim:nth-child(12) { -webkit-animation-delay:6.0s; }
span.anim:nth-child(13) { -webkit-animation-delay:6.5s; }
span.anim:nth-child(14) { -webkit-animation-delay:7.0s; }
span.anim:nth-child(15) { -webkit-animation-delay:7.5s; }
span.anim:nth-child(16) { -webkit-animation-delay:8.0s; }

这很好用，即使用户移动到不同的选项卡，但它会导致很多不必要的代码（HTML和CSS，尽管可以使用JavaScript简化）。你可以看到它正在使用这个JSFiddle：http://jsfiddle.net/f5my3sm1/。

我的直觉告诉我，这可以使用Sass / Less来实现，但我想知道是否有一种简单的“纯CSS”方式来做到这一点，可以用一条规则来实现（希望如此）：

span.anim:nth-child(N) { animation-delay: N * 0.5s; }

Answer 1

There is a very experimental CSS function for using attributes as properties for an element。目前它只适用于伪元素，所以你必须考虑在这个用例中对你的标记进行某种巧妙的重新处理。

您可以将偏移量放在标记（或使用JS）的数据属性中，然后使用以下内容：

/* attr(name, units, fallback) */
span.anim {animation-delay: attr(offset, 1) * 0.5s;}

<span class="anim" offset="0"></span>
<span class="anim" offset="1"></span>
<span class="anim" offset="2"></span>
<span class="anim" offset="3"></span>
<span class="anim" offset="4"></span>

请记住，这仍然是被广泛接受的方式，并且像我之前提到的那样，上面的语法目前无效，因为它需要使用伪元素，如：after。

至少，想一想这很有意思。

Answer 2

CSS variables具有almost universal support on all modern browsers，几乎可以实现与@GreatBlake's answer using attr相同的期望效果，并且还可以达到更多效果。您可以在style属性中将其定义为自定义属性，然后使用var()函数获取这些自定义属性的值，而不用在用户定义的属性中定义数据：

<span class="anim" style="--n: 0"></span>
<span class="anim" style="--n: 1"></span>
<span class="anim" style="--n: 2"></span>
<span class="anim" style="--n: 3"></span>
<span class="anim" style="--n: 4"></span>

span.anim {
  animation-delay: calc(var(--n) * 0.5s);
}