Html 如何在媒体查询中删除一个动画？

我有两个不同的css动画影响同一个词。这是我使用的代码：

#welcome{
    font-size: 80px;
    color: #00FFFF;
    animation: welcomeAnimation infinite 4s,rotate 2s;/*2 animations*/
    animation-delay: 0s;
    animation-timing-function: linear;
    }

当设备浏览器的宽度小于800px时，我只希望播放动画“welcomeAnimation”。我使用的媒体查询如下：

@media screen and (max-width: 800px){
#welcome{
        font-size: 80px;
        color: #00FFFF;
        animation: welcomeAnimation infinite 4s;/*1 animation*/
        animation-delay: 0s;
        animation-timing-function: linear;
        }
}

---

当我这样做时，两个动画仍在播放。如何将两个动画都保留为默认值，但当屏幕较少时，仅播放一个动画？

首先您已取消设置动画

，然后使用另一个关键帧再次应用它

注意：检查媒体查询，必须执行。这也是一个问题


animation: none;

animation: welcomeAnimation infinite 4s;//1 animation
animation-delay: 0s;
animation-timing-function: linear;

首先，先取消设置动画
动画
，然后用另一个关键帧再次应用它

注意：检查媒体查询，必须执行。这也是一个问题


animation: none;

animation: welcomeAnimation infinite 4s;//1 animation
animation-delay: 0s;
animation-timing-function: linear;

除了注释的语法之外，您发布的代码没有任何错误。我已经把它放在下面的工作演示中


@关键帧用于动画{
0%{color:#00FFFF；}
50%{颜色：#008888；}
100%{颜色：#00FFFF；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
50%{变换：旋转（-45度）；}
100%{变换：旋转（0度）；}
}
#欢迎光临{
字号：80px；
颜色：#00FFFF；
动画：Welcome动画无限4s，旋转无限2s；
动画延迟：0s；
动画计时功能：线性；
}
@媒体屏幕和屏幕（最大宽度：800px）{
#欢迎光临{
字号：80px；
颜色：#00FFFF；
动画：Welcome动画无限4s；
动画延迟：0s；
动画计时功能：线性；
}
}

欢迎
除了注释的语法之外，您发布的代码没有任何错误。我已经把它放在下面的工作演示中


@关键帧用于动画{
0%{color:#00FFFF；}
50%{颜色：#008888；}
100%{颜色：#00FFFF；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
50%{变换：旋转（-45度）；}
100%{变换：旋转（0度）；}
}
#欢迎光临{
字号：80px；
颜色：#00FFFF；
动画：Welcome动画无限4s，旋转无限2s；
动画延迟：0s；
动画计时功能：线性；
}
@媒体屏幕和屏幕（最大宽度：800px）{
#欢迎光临{
字号：80px；
颜色：#00FFFF；
动画：Welcome动画无限4s；
动画延迟：0s；
动画计时功能：线性；
}
}

欢迎
介意将css注释写成css注释，而不是js注释；）这些是您正在使用的选择器，还是您在这里的示例中简化了它们？两个块在同一个文件中吗？如果是的话，文件中哪一个排在第一位？如果不是，则首先加载哪个文件？（我想知道这是否是一个特殊性问题。）哎呀。我只是添加了一些注释进行解释。我使用了精确的选择器。两者都在同一个文件中。媒体查询是第二位的。请记住将css注释作为css注释，而不是js注释；）这些是您正在使用的选择器，还是您在这里的示例中简化了它们？两个块在同一个文件中吗？如果是的话，文件中哪一个排在第一位？如果不是，则首先加载哪个文件？（我想知道这是否是一个特殊性问题。）哎呀。我只是添加了一些注释进行解释。我使用了精确的选择器。两者都在同一个文件中。媒体查询排在第二位。这似乎不对。你有支持这个的来源吗？检查此站点，尝试添加
动画：无
，然后按顶部的
查看结果
，它在那里工作。在CSS中，任何时候为属性设置新值，它都会完全覆盖旧值。因此，在赋予属性一个新值之前，将其设置为
none
是完全不必要的。这似乎不正确。你有支持这个的来源吗？检查此站点，尝试添加
动画：无
，然后按顶部的
查看结果
，它在那里工作。在CSS中，任何时候为属性设置新值，它都会完全覆盖旧值。因此，在赋予属性一个新值之前，将属性设置为
none
完全没有必要。你是对的，它可以工作。我不知道以前发生了什么。我在提问时添加了这些评论——它们不是我遇到的任何问题的原因。你是对的——它是有效的。我不知道以前发生了什么。我在提问时补充了这些评论——它们不是我遇到任何问题的原因。