I'm trying to create an animation, where the text appears in the screen and have the option to delay the animation using a timeout.

The strange thing is, when the app first render on the browser, it works as intended, but if I manually refresh "f5", the delay is only visible if it's a longer timeout duration, any value lower than 500ms for example, the others the delay is no visible.

I've already tried to create a custom hook, use "useEffect" and "useLayoutEffect" but this strange behavior keep happening.

Here is the component.

const FadeInText = ({text, style, timeout, noScroll}) => {
const textRef = useRef(null)
const [visible, setVisible] = useState()
    
useLayoutEffect(() => {
    setVisible(timeout !== undefined ? {animation: "none", 
          opacity: 0} : {})
        let time = setTimeout(() => {
            setVisible({})
        }, timeout)
        return () => clearTimeout(time)
    },[timeout]) 

    return <p ref={textRef} style={{...visible,...style}} className="fade-in-text">{text}</p>
}

export default FadeInText;

Here are the CSS rules applied to the text

@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-text {
    font-size: 1rem;
    color: white;
    animation: fade-slide-up 0.2s ease-in;
}

Here are some cases where I use this component, the only component where the delay is visible, is the one with the timeout set as 600

            <FadeInText style={{fontSize: "5vw"}} text="R" timeout={200}  />
            <FadeInText style={{fontSize: "5vw"}} text="A" timeout={300}  />
            <FadeInText style={{fontSize: "5vw"}} text="N" timeout={400}  />
            <FadeInText style={{fontSize: "5vw"}} text="D" timeout={600}  />