How to start one animation after another css animation?

Question

css

Good evening, there is an animation for changing the text, but for some reason it works crookedly, I don’t really understand this. Can you suggest what's wrong? I need the text to change at different intervals, but now it's all crooked
https://codepen.io/Dmoooo/pen/oNZQrYL

Answer 1

Actually, the question contains the answer: you need to combine pairs of animations (title-1 and title-2, etc.) into one. The ability to add multiple animations is provided for changing different properties at the same time, rather than for sequential playback of animations. Although, writing specific text in css is a very bad practice. I would make two blocks positioned in the same place with different texts and animate them separately.