如何使用 .bottom-style-p 类对这些 p 元素进行动画处理，使其从 1 / 8 平滑过渡到 2 / 8 等

Question

我希望能够仅使用 HTML 和 CSS 进行动画处理，以便彼此重叠的 p 元素一一出现然后重置

HTML:
<div class="bottom-style">
            <p class="bottom-style-p">1 / 8</p>
            <p class="bottom-style-p">2 / 8</p>
            <p class="bottom-style-p">3 / 8</p>
            <p class="bottom-style-p">4 / 8</p>
            <p class="bottom-style-p">5 / 8</p>
            <p class="bottom-style-p">6 / 8</p>
            <p class="bottom-style-p">7 / 8</p>
            <p class="bottom-style-p">8 / 8</p>
</div>

CSS:
.bottom-style-p{
    position: absolute;
    top: 96%;
    opacity: 0;
    animation: pFadeIn both ease-in 10s;
}

@keyframes pFadeIn{
    0%{
        opacity: 0;
    } 50%{
        opacity: 1;
    } 100% {
        opacity: 0;
    }
}

.bottom-style-p:nth-child(1){
    animation-delay: 2;
}

.bottom-style-p:nth-child(2){
    animation-delay: 4s;
}

//等等

我已经尝试过上面显示的先前代码，但即使在 20 秒这样的大延迟之后，p 仍然同时出现在彼此的顶部

Answer 1

你的代码的问题在于动画时间，事实上10秒意味着数字将在10秒后消失，就像你写的pFadeIn一样。

此外，如果你想让'\8'不消失，请相对于文本的外观异步设置动画时间。

我是这样做的：

.bottom-style-p {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        animation: pFadeIn 3s ease-in;
    }

@keyframes pFadeIn {
        0% {
            opacity: 1;
        }
        30% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

.bottom-style-p:nth-child(1) {
        animation-delay: 0s;
    }

    .bottom-style-p:nth-child(2) {
        animation-delay: 2s;
    }

    .bottom-style-p:nth-child(3) {
        animation-delay: 4s;
    }

    .bottom-style-p:nth-child(4) {
        animation-delay: 6s;
    }

    .bottom-style-p:nth-child(5) {
        animation-delay: 8s;
    }

    .bottom-style-p:nth-child(6) {
        animation-delay: 10s;
    }

    .bottom-style-p:nth-child(7) {
        animation-delay: 12s;
    }

    .bottom-style-p:nth-child(8) {
        animation-delay: 14s;
    }

我将淡入变为淡出。设置 30% 可以帮助您调整淡入淡出，如果设置 90%，淡出速度会更快，但动画将始终持续 30 秒。

但是，如果将动画时间调整为 2 秒，您还会看到 '\8' 会闪烁，在这种情况下，我建议您将要动画的文本与必须保持固定的文本分开。