Как создать анимацию изменяющегося слова в CSS? ⇐ CSS

[Anonymous]

Пытаюсь добиться эффекта изменения слова в середине предложения, но не понимаю, почему слово после использования кода убегает в середину страницы, а не находится там, где было раньше добавление класса анимации.
Я хочу, чтобы этот текст вёл себя так, как будто этой анимации не существует — независимо от того, какую позицию я использую или что удаляю, фрагмент .word всегда находится в отдельном абзаце от остальной части мой текст. Я пробовал удалить позицию: абсолютная и верхние 50%, левые 50% из стиля .word, не помогло.
Я хочу добиться такого вида:
Strona, która zdobędzie za/dla (изменение слова) Ciebie klienta. - в одну строку, как обычный текст.
Код:

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

 



.container {
position: relative;
font-family: inherit;
color: rgb(255, 255, 255);
font-size: inherit;
filter: contrast(15);
}

.word {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: switch 8s infinite ease-in-out;
min-width: 100%;
margin: auto;
}

.word:nth-child(1) {
animation-delay: -7s;
}

.word:nth-child(2) {
animation-delay: -6s;
}

.word:nth-child(3) {
animation-delay: -5s;
}

@keyframes switch {

0%,
5%,
100% {
filter: blur(0px);
opacity: 1;
}

50%,
80% {
filter: blur(180px);
opacity: 0;
}
}


Stworzymy stronę, która zdobędzie dla za Ciebie klienta.

Я пробовал изменить положение и почти все настройки в Wordpress и Elementor. Просмотрел пару гайдов, но ни один не помог.

Подробнее здесь: https://stackoverflow.com/questions/787 ... ion-in-css