CSS3增加延时效果？

Question

我有一个无序列表:

<ul>
    <li>Apple</li>
    <li>Monkey</li>
    <li>Sun</li>
    <li>Moon</li>
    <li>Movies</li>
</ul>

还有动画中的比例:

ul li {
    animation           : scale-in 1s;
}

@keyframes scale-in
{
    0% { 
        opacity             : 0;
        -webkit-transform   : scale(0.5);
    }
    20% {
        opacity             : 0;
        -webkit-transform   : scale(0.5);
    }
    100% {
        opacity             : 1;
        -webkit-transform   : scale(1.0);
    }
}

现在我喜欢每个元素的延迟彼此相隔1秒。所以第一个元素立即出现，第二个延迟 1 秒，第三个延迟 2 秒，等等。

有没有一种巧妙的方法可以做到这一点，也许是使用第 n 个选择器？或者我真的必须像 ul li:nth-child(1) { delay : 1s; 这样写出来吗？ } ul li:nth-child(2) { 延迟:2s；

Answer 1

除了您建议的方式外，没有其他方法可以用 CSS3 做到这一点。由于没有真正的方法来进行数学运算或循环遍历事物，因此除了手写外，这实际上是不可能的。

我不得不赞同 NightCracker 的 JS 建议。你不必一定要用 JS 编写动画本身，但你可以使用 JS 来触发它。像使用带有增量计数器的 While 循环这样简单的方法应该可以解决问题。

但最终，您只是节省了几行代码，而不是仅仅用 CSS 编写出来。在功能方面，它仍然是相同的，尤其是在不关心跨浏览器兼容性的情况下。