CSS-анимация для движения только вперед и остановки. В настоящее время это идет туда и обратно ⇐ CSS

[Anonymous]

Я пытаюсь сделать так, чтобы только один псевдоэлемент показывал «прогресс», если элемент выделен (т. е. имеет выделенный класс).
В настоящее время анимация движется вперед правильно, но как только он достигает конца, анимация меняется на обратную.
Каждый элемент должен быть выделен в течение 8 секунд, в течение которых индикатор выполнения должен заполняться сверху вниз. После этого выделение должно перейти к следующему элементу. Такое поведение должно выполняться непрерывно по всем элементам.

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

const items = document.querySelectorAll('.enhanced-content__animated-list-item');
let index = 0;
const totalItems = items.length;

const highlightItem = () => {
// Remove 'highlight' and 'progress' classes from all items
items.forEach(item => {
item.classList.remove('highlight', 'progress');
});

// Get the current item
const currentItem = items[index];

// Add 'highlight' and 'progress' classes to the current item
currentItem.classList.add('highlight', 'progress');

// After 8 seconds, move to the next item
setTimeout(() => {
index = (index + 1) % totalItems;
highlightItem();
}, 8000);
};

// Start the cycle
highlightItem();

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

.enhanced-content__container {
background: #fff; /* Replace $COLOR_BACKGROUND_WHITE */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
left: 24px; /* Replace $SPACING_L */
padding-block: 24px; /* Replace $SPACING_L */
padding-inline: 24px; /* Replace $SPACING_L */
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60%;
margin-top: 5rem;
}

.enhanced-content__animated-list-item {
flex-direction: column;
margin-bottom: 20px;
padding: 1rem;
position: relative;
text-align: left;
}

.enhanced-content__animated-list-item .enhanced-content__animated-list-heading,
.enhanced-content__animated-list-item .enhanced-content__animated-list-text {
color: #e4e4e4;
}

.enhanced-content__animated-list-item.highlight .enhanced-content__animated-list-heading,
.enhanced-content__animated-list-item.highlight .enhanced-content__animated-list-text {
color: black;
}

.enhanced-content__animated-list-item::before {
background-color: #e4e4e4;
content: '';
height: calc(100% - 20px);
left: 0;
margin-top: 10px;
position: absolute;
top: 0;
width: 1.5px;
}

.enhanced-content__animated-list-item::after {
background-color: #007bff;
content: '';
height: 0;
left: 0;
position: absolute;
top: 0;
transition: height 8s linear;
width: 1.5px;
}

.enhanced-content__animated-list-item.progress::after {
height: calc(100% - 20px);
}
}

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

heading






title 1


content one


title 2


content two


title 3


content three


title 4


content four

Подробнее здесь: https://stackoverflow.com/questions/792 ... -and-forth