css - 是否可以将第 n 个子值用作属性中的参数？ (如何)

Question

简短描述(tl;dr;)

是否有一种“纯 CSS”方式(不是 Less/Sass)在 CSS 属性中使用 nth-child 的值？像这样:

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

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

span.anim {
  display: inline-block;
  font-size: 30px;
  opacity: 0;
  animation: fade-in-and-rotate 1s;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--n) * 0.5s);
}

@keyframes fade-in-and-rotate {
  from {
    transform: rotate(0deg);
    opacity: 0;
  }
  to {
    transform: rotate(360deg);
    opacity: 1;
  }
}

<span class="anim" style="--n: 0">zero</span>
<span class="anim" style="--n: 1">one</span>
<span class="anim" style="--n: 2">two</span>
<span class="anim" style="--n: 3">three</span>
<span class="anim" style="--n: 4">four</span>

此代码片段还将 span.anim 的 display 属性设置为 inline-block 以用于问题提供的旋转动画 to work .