Поиск с помощью CSS-анимации ⇐ CSS

[Anonymous]

Если кто-нибудь может мне помочь, у меня проблемы с анимацией. Я хочу сохранить тот же стиль анимации для «использования ILLIMITEE», но когда «использование ILLIMITEE» исчезает, «без контакта» занимает свое место в той же позиции и с той же анимацией, и так далее для других текстов. Затем мы возвращаемся к тому же самому. Использование только HTML и CSS. Кто-нибудь может помочь?

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

@keyframes coolAnimation {
0%, 100% {
opacity: 0;
transform: translateY(100%);
}
50% {
opacity: 1;
transform: translateY(0);
}
}

#textContainer {
position: relative;
overflow: hidden; /* Cacher tout débordement */
}

.coolText {
color: #000000;
font-family: 'Myriad Pro', Arial, sans-serif;
margin: 0;
padding-bottom: 0;
font-size: 40px;
animation: coolAnimation 6s ease-in-out infinite;
position: relative;
opacity: 0;
transform: translateY(100%);
}

.coolText:nth-child(1) { animation-delay: 0s; }
.coolText:nth-child(2) { animation-delay: 3s; }
.coolText:nth-child(3) { animation-delay: 6s; }
.coolText:nth-child(4) { animation-delay: 9s; }

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

Cool Text Animation



 UTULISATION
ILLIMITEÉ 
 SANS
CONTACT 
SANS
ABONNEMENT
ECO-
RESPONSABLE

Подробнее здесь: https://stackoverflow.com/questions/783 ... -animation