我怎样才能让它停止一小会儿然后又继续滚动

Question

https://codepen.io/lucabeingluca/pen/vYMPLZN

<div class="wrapper">
    <div class="marquee">
        <p>
            longer one again
        </p>
        <p>
            longer one again
        </p>
    </div>
</div>

.wrapper {
    max-width: 10%;
    overflow: hidden;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: marquee 7s linear infinite;
}

.marquee p {
    display: inline-block;
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

我希望它在完成一个“再长一个”后，它会停止一个短暂的半秒，然后继续滚动，它只是重复有点像苹果音乐滚动动画，当标题太长时，它会开始滚动，然后停止一段时间短暂的一秒钟然后继续。 yk:)

我不知道该尝试什么，因为我很笨：/

Answer 1

我们可以在 10% 处添加另一个关键帧，将位置保持在 0，这样 0% 到 10% 之间就不会发生任何变化，然后滚动动画的其余 90%。

.wrapper {
    max-width: 10%;
    overflow: hidden;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: marquee 7s linear infinite;
}

.marquee p {
    display: inline-block;
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    10% {
        transform: translate3d(0,0,0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

<div class="wrapper">
    <div class="marquee">
        <p>
            longer one again
        </p>
        <p>
            longer one again
        </p>
    </div>
</div>