我正在尝试以交错方式使三个点“掉落”到屏幕上的动画:每个点在视口中的显示都略有延迟。由于某种原因,延迟没有应用到后续元素,它们都立即出现。标记:
<div class="ellipsis">
<span>⬤</span>
<span>⬤</span>
<span>⬤</span>
</div>
CSS(由postcss
嵌套提供:]
.ellipsis {
padding: 0;
margin: 0.33rem 0;
width: 1rem;
letter-spacing: 0.23rem;
animation: fall 1.3s forwards;
& span {
display: inline-block;
font-size: var(--step-0);
}
& :nth-child(2) {
animation-delay: -0.4s;
}
& :nth-child(3) {
animation-delay: -0.7s;
}
}
@keyframes fall {
0% {
transform: translateY(-44px);
}
100% {
transform: translateY(7px);
}
}
我忘了什么?
要为点设置动画,而不是container,应将animation: fall 1.3s forwards;
添加到span
,而不是.ellipsis
。
动画应该在<span>
元素上,而不在.ellipsis
容器上:
.ellipsis {
padding: 0;
margin: 0.33rem 0;
width: 1rem;
letter-spacing: 0.23rem;
}
.ellipsis span {
display: inline-block;
animation: fall 1.3s forwards;
transform: translateY(-78px);
font-size: var(--step-0);
}
.ellipsis span:nth-child(2) {
animation-delay: 0.7s;
}
.ellipsis span:nth-child(3) {
animation-delay: 1.4s;
}
@keyframes fall {
0% {
transform: translateY(-78px);
}
100% {
transform: translateY(7px);
}
}
<div class="ellipsis">
<span>⬤</span>
<span>⬤</span>
<span>⬤</span>
</div>