Estoy tratando de lograr un desvanecimiento suave en la animación de texto con CSS en React y Typescript usando estilo en línea. Estoy creando un objeto con información de estilo y me refiero a él en el atributo de estilo. El código está abajo. No funciona y tengo un problema para hacerlo funcionar, ¿alguien puede ayudarme o darme algunos consejos, por favor?

Ese es un ejemplo práctico de lo que estoy tratando de lograr: [Ejemplo Codepen][1]

Mi código:

 import React from 'react'; const styles = { body: { margin: 0, backgroundColor: '#232323', color: '#fff', fontFamily: 'Calibri, sans-serif', boxSizing: 'border-box', }, center: { width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', }, p: { width: '70%', fontSize: '30px', display: 'block', textAlign: 'center', }, char: { fontSize: '40px', height: '40px', animation: 'an 1s ease-out 1 both', display: 'inline-block', }, '@keyframes an': { from: { opacity: 0, transform: 'perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg)', }, to: { opacity: 1, transform: 'perspective(500px) translate3d(0, 0, 0)', }, }, }; function FadeInText() { var text = document.getElementById('text') as HTMLElement; var newDom = ''; var animationDelay = 6; for (let i = 0; i < text.innerText.length; i++) { newDom += '<span class="char">' + (text.innerText[i] === ' ' ? '&nbsp;' : text.innerText[i]) + '</span>'; } text.innerHTML = newDom; var length = text.children.length; for (let i = 0; i < length; i++) { text.children[i].style['animation-delay'] = animationDelay * i + 'ms'; } return ( <div style={styles.center}> <p id="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate incidunt praesentium, rerum voluptatem in reiciendis officia harum repudiandae tempore suscipit ex ea, adipisci ab porro. </p> </div> ); } export { FadeInText };``` [1]: https://codepen.io/Figario/pen/qBoaqwG