animation - 顺序 CSS3 动画

Question

我想知道是否可以仅使用 CSS3 使元素列表按顺序淡入淡出？

HTML 应该是这样的:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>

    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>

    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
</ul>

当 UL 获得“淡出”类时，如果第一个“item1”淡出(在 2 秒内)，一旦完成淡出下一个(“item2”)等等，直到所有元素都淡出，这会很酷淡出。

我知道如何使用 jQuery 来做到这一点，但如果仅使用 CSS3 就可以做到这一点，那会更好吗？如果这可能，有什么想法吗？

编辑:我真的在寻找一种解决方案，当您不知道列表中有多少项时也能正常工作。可能是 1 也可能是 100？

编辑:显然，只使用 CSS 不可能为可变数量的元素做这个，所以最好的 CSS 解决方案是针对固定数量的元素。否则你将不得不使用 JS。

感谢回复!

Answer 1

这行得通:

HTML:

<ul class="fadeout">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

CSS:

ul.fadeout li:nth-child(1){
    -webkit-animation: fadeOut 2s linear forwards;
}
ul.fadeout li:nth-child(2){
    -webkit-animation: fadeOut 2s linear 2s forwards;
}
ul.fadeout li:nth-child(3){
    -webkit-animation: fadeOut 2s linear 4s forwards;
}
ul.fadeout li:nth-child(1){
    -webkit-animation: fadeOut 2s linear forwards;
}
@-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

http://jsfiddle.net/fGAZr/