SOURCE

// 添加动画
function addAnimation() {
    let animationDuration = '10s'
    let speed = 100
    let noticeBox = document.querySelector('.notice-box')
    let noticeContent = document.getElementById("notice-content")
    let noticeText = document.querySelector('.notice-text')

    initNotice()
    noticeContent.addEventListener('animationend', changeAnimateClass)

    function initNotice() {
        let time = noticeContent.clientWidth / speed
        animationDuration = time + 's'
        // 只有文本超出范围才开启动画
        if (noticeText.clientWidth > noticeBox.clientWidth) {
            setTimeout(() => {
                noticeContent.style.animationDuration = animationDuration
                noticeContent.classList.add('notice-content-out')
            }, 1000);
        }
    }

    function changeAnimateClass() {
        if (noticeContent.classList.contains('notice-content-out')) {
            noticeContent.classList.remove('notice-content-out')
            let time = noticeBox.clientWidth / speed
            animationDuration = time + 's'
            noticeContent.classList.add('notice-content-into')
        }
        else if (noticeContent.classList.contains('notice-content-into')) {
            noticeContent.classList.remove('notice-content-into')
            let time = noticeText.clientWidth / speed
            animationDuration = time + 's'

            setTimeout(() => {
                noticeContent.classList.add('notice-content-out')
            }, 1000)

        }
    }
}

addAnimation()

<div class="notice-box flex overflow-hidden h-full">
	<div id="notice-content" class="flex flex-nowrap">
		<span class="notice-text">根据监管要求，如您需要继续使用自动下单功能，请您与2023年12月29日前完成股票程序化交易报备，否则将无法继续使用该功能，请您尽快联系开户营业部</span>
    </div>
</div>

.flex {
    display: flex;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.h-full {
    height: 100%;
}

.notice-content-out {
    animation: notice-out 10s linear both;
}

.notice-content-into {
    animation: notice-into 10s linear both;
}

.notice-text {
    font-size: 18px;
    word-break: keep-all;
    white-space: nowrap;
}

@keyframes notice-into {
    0% {
        padding-left: 100%;
    }

    100% {
        padding-left: 0;
    }
}

@keyframes notice-out {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}