Как сделать так, чтобы каждое слово задерживалось посередине на секунду, прежде чем переходить к следующему? ⇐ Html

[Anonymous]

Мой код прокручивается плавно, но я хочу, чтобы каждое слово задерживалось посередине на секунду, прежде чем переходить к следующему слову, сохраняя при этом бесконечный цикл?

Код: Выделить всё

Wellbeing

Mental Health

Healing

Wellbeing

Mental Health

Healing





#scroll-container {
position: relative;
height: 150px; /* adjust based on how many lines you want visible */
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;

/* This makes the text fade at top and bottom */
mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

#scroll-text {
display: inline-block;
animation: scroll-up 10s linear infinite;
}

#scroll-text h1 {
font-weight: 600;
font-style: normal;
text-transform: uppercase;
color: white;
line-height: 1.4em;
margin: 0;
text-align: left;
font-family: "neue-haas-grotesk-display", sans-serif !important;
}

/* Smooth infinite upward scroll */
@keyframes scroll-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}

Мне надоело настраивать ключевые кадры, но я не могу заставить их прокручиваться правильно и плавно.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ling-up-to