我尝试用JS给定时器添加一个介绍动画，但是每次运行带有setinterval的函数时，它似乎都会重新启动。该函数每秒更新一次定时器。这是我的脚本：

function updateTimer(){
        var target = Date.parse("9 January 2023, 00:00:00");
        var today = new Date();
        var diff = target - today;
        
        var days = Math.floor(diff / (1000 * 60 * 60 * 24));
        var hours = Math.floor(diff / (1000 * 60 * 60));
        var mins = Math.floor(diff / (1000 * 60));
        var secs = Math.floor(diff / 1000);

        var days = days;
        var hours = hours - days * 24;
        var minutes = mins - hours * 60;
        var seconds = secs - mins * 60;
        
        document.getElementById("timer").innerHTML =
        '<div>' + days + '<span> Days</span></div>' +
        '<div>' + hours + '<span> Hours</span></div>' +
        '<div>' + minutes + '<span> Minutes</span></div>' +
        '<div>' + seconds + '<span> Seconds</span></div>';
    }
        setInterval('updateTimer()', 1000);

脚本将在以下HTML代码中显示计时器：

<div id="timer">
    <div><span>Days</span></div>
    <div><span>Hours</span></div>
    <div><span>Minutes</span></div>
    <div><span>Seconds</span></div>
    </div>

我尝试应用的动画具有以下关键帧：

@keyframes timerSlideUp{
    0%{
    opacity: 0%; animation-delay: 5s;
    }
    100%{
    opacity: 100%;
    }
}

使用装饰性CSS：

#timer{
    color: white;
    padding: 20px;
    text-align: center;
}

#timer div{
    display: inline-block;
    min-width: 40px;
    padding: 15px;
    background: transparent;
    border-radius: 3px;
    border: 5px solid white;
    margin-top: 30%;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    animation: timerSlideUp 5s forwards;
}

我什么都没试过，因为我根本不知道该怎么解决这个问题。
我试图让计时器淡入并停留在原地（因此在“animation”属性中使用了“forwards”）。我还计划在将来添加其他动画，所以这些重新启动使它不可能。
先谢了！