仅使用CSS防止动画再次发生

仅使用CSS可能无法做到这一点，但下面是：

考虑到这一点CSS：

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

这会在具有

.animated

类的元素上触发动画，该类在上述

3s

延迟后可见。
如果屏幕为

450px

或更低，动画将被取消

我想改变的行为是：动画触发（浏览器窗口足够大），然后浏览器窗口缩小到

450px

以下，然后放大到

450px

上，从而触发动画运行

---

我想知道，当浏览器窗口从低于

450px

增长到高于450px时，是否有一种仅使用CSS的解决方案来防止动画运行。

这似乎有点类似（但不是重复），据我所知，仅使用CSS是不可能的。即使迭代计数可以设置为1，但一旦动画被删除（通过重新应用时的

none

），UA将再次触发它。不，没有，您是否试图阻止动画在智能手机上从

横向

切换到

纵向

模式？如果有媒体查询，请尝试将小屏幕的动画时间设置为0，这将很难实现，因为有很多因素。稍后我会试着拉小提琴。嘿，伙计们，谢谢你们的评论@哈利：也许我误解了链接的答案，但我认为这是另一回事。@Harry:我现在明白了，公平点。这似乎有点类似（但不是重复），据我所知，仅使用CSS是不可能的。即使迭代计数可以设置为1，但一旦动画被删除（通过重新应用时的

none

），UA将再次触发它。不，没有，您是否试图阻止动画在智能手机上从

横向

切换到

纵向

模式？如果有媒体查询，请尝试将小屏幕的动画时间设置为0，这将很难实现，因为有很多因素。稍后我会试着拉小提琴。嘿，伙计们，谢谢你们的评论@哈利：也许我误解了相关的答案，但我认为这是另一回事。@Harry:我现在明白了，说句公道话。