Единственное решение CSS, чтобы слово выглядело естественным образом в предложении ⇐ CSS

[Anonymous]

Итак, у меня есть предложение html.slim, которое выглядит следующим образом:

р | Авторизоваться span.word-shapeshift.text-center span.word Посмотреть span.word Вовлечь span.word Покори span.word Поражение | члены внешнего мира Я пытаюсь сделать так, чтобы эти слова естественным образом появлялись в предложении, вот так:

"Войдите, чтобы завоевать представителей внешнего мира". Однако мой код CSS делает так, чтобы слово появлялось позади предложения. CSS-код ниже:

$speed: 12 с; $wordCount: 4; .word-shapeshift { цвет: #ecf0f1; пробел: nowrap; положение: относительное; цвет: #fff; фильтр: контраст (25) размытие (1 пиксель); .слово { позиция: абсолютная; отображение: встроенный блок; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); анимация: RotateWord $speed бесконечная легкость выхода; @for $i от 0 до $wordCount { &:nth-child(#{$i + 1}) { анимация-задержка: ($speed / ($wordCount + 1) * $i) - $speed; } } @keyframes RotateWord { 0%, 5%, 100% { фильтр: размытие (0 пикселей); непрозрачность: 1; } 20%, 80% { фильтр: размытие (1em); непрозрачность: 0; } } } } Что я здесь делаю не так?