我认为你应该尝试用JavaScript创建你的动画，比如：

function moveUp() {
        setTimeout(function () {
            document.getElementById("yourAnim").animate([
                { color: "red" },
                { color: "black" },
                { color: "red" },
            ], {
                duration: 5000
            });

        }, 5000)
    }

moveUp()

它也许能解决你的问题

你需要确保你的动画元素是渲染的，而不是设置为display: none。你可以设置为visibility: hidden，它仍然应该在幕后动画。
例如，在下面的代码片段中，如果你快速点击三次“添加”，你会得到三个动画-一个总是可见的，一个是display: none，一个是visibility: hidden。两秒钟后，两个不总是可见的动画将变为可见。你会看到visibility: hidden的动画在显示时将部分显示在顶部，但是display: none的一个将从底部开始（然后在大约一半的地方被移除）。

let i = 0;
document.getElementById('add').addEventListener('click', function() {
    const div = document.createElement('div');
    div.classList.add('a');
    div.innerHTML = 'test';
    if (i % 3 == 1) {
        div.style.display = 'none';
        div.innerHTML += ': display none';
        setTimeout(() => {
            div.style.display = 'block';
        }, 2000);
    }
    else if (i % 3 == 2) {
        div.style.visibility = 'hidden';
        div.innerHTML += ': visibility hidden';
        setTimeout(() => {
            div.style.visibility = 'visible';
        }, 2000);
    }
    i++
    document.getElementById('container').appendChild(div);
    setTimeout(() => {
        div.remove()
    }, 5000);
});

.a {
    animation: move-up 5s linear;
    position: absolute;
}

#container {
    border: solid 1px black;
    height: 200px;
    width: 200px;
}

@keyframes move-up {
   from { top: 200px    }
   to   { top: 50px }
}

<button id="add">Add</button>

<div id="container"></div>