使用CSS防止动画第二次发生

Question

这可能无法使用CSS，但这里有：

鉴于CSS的这一点：

.animated {
    animation:enter-animation 0.5s ease-in-out 3s;
}
@media (max-width:450px) {
    .animated {
        animation:none;
    }
}

这会触发具有.animated类的元素的动画，该元素在上面指定的3s延迟后可见。
如果屏幕为450px或更低，则动画将被取消。

我想要更改的行为是：动画触发器（浏览器窗口足够大），然后浏览器窗口缩小到450px以下，然后放大450px以触发动画运行。< / p>

我想知道是否有一个仅限CSS的解决方案，以防止在浏览器窗口从450px下方增长到此时运行动画。