我正在尝试以交错方式将三个点“掉落”到屏幕上,使它们动画化:每个点在视口中的显示都略有延迟。由于某种原因,延迟没有应用到后续元素,它们都立即出现。标记:
<div class="ellipsis">
<span>⬤</span>
<span>⬤</span>
<span>⬤</span>
</div>
CSS (nesting courtesy of 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);
}
}
我忘了什么?
The animation should be on the
<span>
elements not the.ellipsis
container:To animate the dots, not the container, you should add
animation: fall 1.3s forwards;
tospan
, not to.ellipsis
.