请参见下面的HTML代码。什么CSS代码将完成以下任务：
加载时，第一部分显示指定的时间，然后消失。然后，第二部分显示指定的时间，然后消失；然后是第三部分，然后是第四部分，其方式与前面的部分相同。整个过程重复一遍。
section {margin: 50px 40%;}<section id="one">
<div class="content">Some stuff</div>
</section>
<section id="two">
<div class="content">Some other stuff</div>
</section>
<section id="three">
<div class="content">More of the same</div>
</section>
<section id="four">
<div class="content">Ditto</div>
</section>看看CSS animations。您可以使用关键帧来隐藏和显示类似以下内容的部分：
@keyframes show{
0% {opacity: 0}
10% {opacity: 1}
25% {opacity: 0}
}
然后，您可以使用animation-delay延迟每个部分的开始：
#one{
opacity: 0;
animation: show 40s infinite;
}
#two{
opacity: 0;
animation: show 40s infinite;
animation-delay: 10s;
}
#three{
opacity: 0;
animation: show 40s infinite;
animation-delay: 20s;
}
#four{
opacity: 0;
animation: show 40s infinite;
animation-delay: 30s;
}
稍加调整和数学，您就能得到想要的结果！
我的代码段：
@keyframes show{
0% {opacity: 0}
10% {opacity: 1}
25% {opacity: 0}
}
#one{
opacity: 0;
animation: show 40s infinite;
}
#two{
opacity: 0;
animation: show 40s infinite;
animation-delay: 10s;
}
#three{
opacity: 0;
animation: show 40s infinite;
animation-delay: 20s;
}
#four{
opacity: 0;
animation: show 40s infinite;
animation-delay: 30s;
}<body>
<style>
section {
margin: 50px 40%;
}
</style>
<section id="one">
<div class="content">Some stuff</div>
</section>
<section id="two">
<div class="content">Some other stuff</div>
</section>
<section id="three">
<div class="content">More of the same</div>
</section>
<section id="four">
<div class="content">Ditto</div>
</section>
</body>