当鼠标悬停在一个有溢出文本的容器上时，我正在尝试动画滚动文本。现在，当鼠标悬停在容器上时，我让动画滚动到文本的末尾，但是当鼠标离开时，文本突然回到原来的位置。我希望它也动画回到原来的位置时，鼠标离开。

import {useEffect, useRef, useState} from 'react';
import classes from './test.module.css';

const Test = () => {
    const textRef = useRef(null);
    const containerRef = useRef(null);

    const [isHovered, setIsHovered] = useState(false);
    const [isOverflowing, setIsOverflowing] = useState(false);

    const onMouseEnter = () => {
        setIsHovered(true);
    };

    const onMouseLeave = () => {
        setIsHovered(false);
    };

    useEffect(() => {
        const textWidth = textRef.current.offsetWidth;
        const containerWidth = containerRef.current.offsetWidth;

        if (textWidth > containerWidth) {
            setIsOverflowing(true);
        }
    }, []);

    return (
        <div>
            <div ref={containerRef} className={classes.animated} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
                <h3 className={isHovered && isOverflowing ? classes.textAnimated : classes.text} ref={textRef}>
                    This is some very very very long text
                </h3>
            </div>
        </div>
    );
};

export default Test;

.animated {
    margin: 200px;
    position: relative;
    white-space: nowrap;
    max-width: 300px;
    width: 100%;
    overflow: hidden;
    background: #0c0c0c;
    display: inline-block;
    position: relative;
    border: 1px solid white;
}

.textAnimated {
    color: #fff;
    animation: textScroll 3s linear forwards;
    display: inline-block;
    position: relative;
}

.text {
    color: #fff;
    display: inline-block;
    position: relative;
}

@keyframes textScroll {
    0% {
        transform: translateX(0);
        left: 0;
    }
    10% {
        transform: translateX(0);
        left: 0;
    }
    90% {
        transform: translateX(calc(-100%));
        left: 100%;
    }
    100% {
        transform: translateX(calc(-100%));
        left: 100%;
    }
}