我的名字叫Gustavo，我正在用css为我的流媒体覆盖制作社交媒体动画。
问题是，我希望网格中的每个孩子在animation-delay中都有一个额外的+0.5s。但我已经尝试了几种方法，但都无法成功。
我尝试在.grid类中使用:nth-child()，在animation-delay中为每个孩子添加+0.5s，但没有成功。有人能帮我做这件事吗？
链接查看代码：https://codepen.io/gustavo-nicolla/pen/jOzJXKd
您在解决问题的尝试中基本上是正确的。
如果你使用下面的代码，你会得到你想要的，假设我已经正确理解了你的描述。我还创建了一个工作代码笔，这样你就可以查看它了。
HTML
<body>
<div class="grid">
<div class="grid__item">
<span class="grid__text">facebook</span>
</div>
<div class="grid__item">
<span class="grid__text">instagram</span>
</div>
<div class="grid__item">
<img class="grid__image" src="https://i.imgur.com/YEm0MAO.png">
</div>
<div class="grid__item">
<img class="grid__image" src="https://i.imgur.com/zbMfFay.png">
</div>
</div>
</body>
scs-
body {
background-color: black;
}
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(2, 200px);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
&__item {
display: grid;
place-content: center;
overflow: hidden;
& > * {
opacity: 0;
animation: show-text-down 8s infinite;
}
&:nth-child(2) {
& > * {
animation-delay: .5s;
}
}
&:nth-child(3) {
& > * {
animation-delay: 1s;
}
}
&:nth-child(4) {
& > * {
animation-delay: 1.5s;
}
}
}
&__text {
font-family: Roboto, Arial, sans-serif;
font-size: 22px;
color: white;
}
&__image {
width: 30px;
height: 30px;
}
}
@keyframes show-text-down {
0%, 10% { opacity: 1; transform: translate3d(0, -100%, 0); }
30%, 60% { opacity: 1; transform: translate3d(0, 0, 0); }
90%, 100% { opacity: 1; transform: translate3d(0, -100%, 0); }
}