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中编写代码。功能方面它仍然是相同的，特别是如果不考虑跨浏览器兼容性。

CSS3增加延迟效果？

1 个答案: