Текстовая обертка на анимации CSS ⇐ CSS

[Anonymous]

У меня есть странный сбой на моей анимации CSS, которая разбивает слова. < /p>
Мне нравится эффект анимации, но это нарушает его. Это происходит для любых фраз, которые я пробую. это?

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

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #111;
color: white;
font-family: Arial, sans-serif;
padding: 100px;
text-align: center;
}

.heading {
display: inline-flex;
/* Allows wrapping */
flex-wrap: wrap;
/* Ensures words break normally */
font-size: 2rem;
font-weight: bold;
opacity: 0;
transform: translateY(10px);
animation: fadeUp 1s forwards ease-out;
max-width: 90%;
word-wrap: break-word;
}

@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(10px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.letter {
display: inline;
/* Now acts like normal text */
opacity: 0;
animation: fadeLetter 0.2s forwards ease-out;
}

.space {
display: inline;
/* Allows wrapping */
width: 0.3em;
/* Keeps spacing correct */
}

@keyframes fadeLetter {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

/* Generate delays for all 35 characters */
.letter:nth-child(1) {
animation-delay: 0.02s;
}

.letter:nth-child(2) {
animation-delay: 0.04s;
}

.letter:nth-child(3) {
animation-delay: 0.06s;
}

.letter:nth-child(4) {
animation-delay: 0.08s;
}

.letter:nth-child(5) {
animation-delay: 0.1s;
}

.letter:nth-child(6) {
animation-delay: 0.12s;
}

.letter:nth-child(7) {
animation-delay: 0.14s;
}

.letter:nth-child(8) {
animation-delay: 0.16s;
}

.letter:nth-child(9) {
animation-delay: 0.18s;
}

.letter:nth-child(10) {
animation-delay: 0.2s;
}

.letter:nth-child(11) {
animation-delay: 0.22s;
}

.letter:nth-child(12) {
animation-delay: 0.24s;
}

.letter:nth-child(13) {
animation-delay: 0.26s;
}

.letter:nth-child(14) {
animation-delay: 0.28s;
}

.letter:nth-child(15) {
animation-delay: 0.3s;
}

.letter:nth-child(16) {
animation-delay: 0.32s;
}

.letter:nth-child(17) {
animation-delay: 0.34s;
}

.letter:nth-child(18) {
animation-delay: 0.36s;
}

.letter:nth-child(19) {
animation-delay: 0.38s;
}

.letter:nth-child(20) {
animation-delay: 0.4s;
}

.letter:nth-child(21) {
animation-delay: 0.42s;
}

.letter:nth-child(22) {
animation-delay: 0.44s;
}

.letter:nth-child(23) {
animation-delay: 0.46s;
}

.letter:nth-child(24) {
animation-delay: 0.48s;
}

.letter:nth-child(25) {
animation-delay: 0.5s;
}

.letter:nth-child(26) {
animation-delay: 0.52s;
}

.letter:nth-child(27) {
animation-delay: 0.54s;
}

.letter:nth-child(28) {
animation-delay: 0.56s;
}

.letter:nth-child(29) {
animation-delay: 0.58s;
}

.letter:nth-child(30) {
animation-delay: 0.6s;
}

.letter:nth-child(31) {
animation-delay: 0.62s;
}

.letter:nth-child(32) {
animation-delay: 0.64s;
}

.letter:nth-child(33) {
animation-delay: 0.66s;
}

.letter:nth-child(34) {
animation-delay: 0.68s;
}

.letter:nth-child(35) {
animation-delay: 0.7s;
}

.letter:nth-child(36) {
animation-delay: 0.7s;
}

h1 {
font-size: 68px !important;
letter-spacing: -5px
}< /code>

B
r
i
g
h
t
 
i
d
e
a
 
i
s
  
a
h
e
a
d
 
f
o
r
 
G
e
n
e
r
a
t
i
o
n

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