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) { delay : 2s; } 这样写出来吗？

Answer 1

除了您建议的方法之外，没有其他方法可以使用 CSS3 来执行此操作。由于没有真正的方法来进行数学运算或循环遍历事物，因此除了用手写出来之外，实际上不可能。

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

最终，您只是保存了几行代码，而不是直接用 CSS 编写。功能方面它仍然是相同的，特别是如果跨浏览器兼容性不是问题的话。