Как запустить одну анимацию после другой анимации css?

Question

[Frostik12]

Добрый вечер, есть анимация смены текста, но почему-то она криво работает, я не особо в разбираюсь в этом. Можете подсказать в чем дело? Мне нужно чтобы текст менялся в разные промежутки времени, но сейчас это все криво
https://codepen.io/Dmoooo/pen/oNZQrYL

Comments

[Aricus]

Плохо сделано описание желаемого результата: не понятно, что конкретно требуется.

[Frostik12]

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

Сейчас почему-то эти две анимации запускаются почти одновременно и полоса работает криво

Answer 1

[Aricus]

Собственно, вопрос содержит ответ: нужно пары анимаций (title-1 и title-2 и т.д.) объединить в одну. Возможность добавления нескольких анимаций предусмотрена для одновременного изменения разных свойств, а не для последовательного воспроизведения анимаций. Хотя, писать конкретный текст в css - очень плохая практика. Я бы сделал два блока, спозиционированные в одном месте, с разными текстами, и сделал бы анимации для них отдельно.