Animation 顺序CSS3动画

我想知道是否可以只使用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>

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15

当UL获得“淡出”等级时，如果第一个“项目1”淡出（在2秒钟内），一旦完成，下一个（“项目2”）就会淡出，以此类推，直到所有项目都淡出，这将是很酷的

我知道如何使用jQuery实现这一点，但如果只使用CSS3就可以实现这一点，那就太好了？如果可能的话，有什么想法吗

编辑：我正在寻找一种解决方案，在您不知道列表中有多少项的情况下也能起作用。可能是1，可能是100

编辑：显然，仅使用CSS不可能对可变数量的元素进行编辑，因此最好的CSS解决方案是针对固定数量的项目。否则，您将不得不使用JS

谢谢回复

这将起作用：

HTML:

---

这是我不推荐的，因为对于所有的供应商扩展，它会变得非常冗长。可以用SCS自动生成代码，但我不想麻烦

ul li { transition: opacity 200ms linear;}
ul.fadeout li {opacity: 0;}

ul.fadeout li:nth-child(1)  { transition-delay: 0    }
ul.fadeout li:nth-child(2)  { transition-delay: 0.1s }
ul.fadeout li:nth-child(3)  { transition-delay: 0.2s }
ul.fadeout li:nth-child(4)  { transition-delay: 0.3s }
ul.fadeout li:nth-child(5)  { transition-delay: 0.4s }
ul.fadeout li:nth-child(6)  { transition-delay: 0.5s }
ul.fadeout li:nth-child(7)  { transition-delay: 0.6s }
ul.fadeout li:nth-child(8)  { transition-delay: 0.7s }
ul.fadeout li:nth-child(9)  { transition-delay: 0.8s }
ul.fadeout li:nth-child(10) { transition-delay: 0.9s }
ul.fadeout li:nth-child(11) { transition-delay: 1s   }
ul.fadeout li:nth-child(12) { transition-delay: 1.1s }
ul.fadeout li:nth-child(13) { transition-delay: 1.2s }
ul.fadeout li:nth-child(14) { transition-delay: 1.3s }
ul.fadeout li:nth-child(15) { transition-delay: 1.4s }

---

您可以在此处查看webkit唯一的示例：

将代码与链接一起放在此处会更好。另外，这是在使用webkit，所以在FF8中不起作用……这不是挖苦，只是一个建议和评论，您可能想添加它，这是一个chrome/safari解决方案。：）是的，这是可行的，但我真的在寻找一个解决方案，不涉及固定数量的项目。如果我在列表中添加两个项目，它们将不会被设置动画，我可能应该稍微指定一点问题（编辑问题）是的，这是可行的，但我真的在寻找一个解决方案，不涉及固定数量的项目。如果我在列表中添加两个项目，它们将不会被动画化，我稍微指定了我的问题。这太糟糕了，虽然很酷，它可以完全替换jquery代码，但我必须使用javascript。感谢您的回答，请将该样式转换为

$（对象）

，并根据

$（“选择器”）.长度将其克隆
n次。
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; }
}

ul li { transition: opacity 200ms linear;}
ul.fadeout li {opacity: 0;}

ul.fadeout li:nth-child(1)  { transition-delay: 0    }
ul.fadeout li:nth-child(2)  { transition-delay: 0.1s }
ul.fadeout li:nth-child(3)  { transition-delay: 0.2s }
ul.fadeout li:nth-child(4)  { transition-delay: 0.3s }
ul.fadeout li:nth-child(5)  { transition-delay: 0.4s }
ul.fadeout li:nth-child(6)  { transition-delay: 0.5s }
ul.fadeout li:nth-child(7)  { transition-delay: 0.6s }
ul.fadeout li:nth-child(8)  { transition-delay: 0.7s }
ul.fadeout li:nth-child(9)  { transition-delay: 0.8s }
ul.fadeout li:nth-child(10) { transition-delay: 0.9s }
ul.fadeout li:nth-child(11) { transition-delay: 1s   }
ul.fadeout li:nth-child(12) { transition-delay: 1.1s }
ul.fadeout li:nth-child(13) { transition-delay: 1.2s }
ul.fadeout li:nth-child(14) { transition-delay: 1.3s }
ul.fadeout li:nth-child(15) { transition-delay: 1.4s }