I am trying to achieve a smooth fade in text animation with CSS in React and Typescript using inline styling.I am creating an object with styling information, and refer to it in the style attribute. The code is down below. It does not work and I have a problem to get it work, can someone help or give some hints please?

Thats a working example what I am trying to achieve: [Codepen Example][1]

My code:

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