如何摆脱媒体查询中的一个动画？

Question

我有两个不同的 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;
        }
}

当我执行此操作时，两个动画仍在播放。如何让两个动画都默认，但是当屏幕少的时候，只播放一个动画？

Answer 1

首先您取消了首先 animation 然后用另一个关键帧再次应用它。

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

Working Fiddle

animation: none;

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

Answer 2

除了评论的语法外，您发布的代码没有任何问题。我已将其放入下面的工作演示中。

@keyframes welcomeAnimation {
  0% { color: #00FFFF; }
  50% { color: #008888; }
  100% { color: #00FFFF; }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-45deg); }
  100% { transform: rotate(0deg); }
}

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

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

<div id="welcome">
  Welcome
</div>

我做了一个小改动，只是为了让效果更容易被注意到：我在旋转动画中添加了 "infinite"。这不是解决问题的必要条件。

请注意，如果您运行答案中的代码片段，则只有一个动画（因为代码片段 window 宽度小于 800 像素）——但如果您整页启动它, 它有两个动画。

或者您可以在 jsFiddle 上观看相同的演示，您可以在其中拖动和调整预览大小 window 以激活或取消激活第二个动画。

那为什么它对你不起作用？这可能是一个特异性问题，或者是因为您使用错误的语法插入注释。

如果您在实际代码中有任何使用双斜杠语法的注释，请将其删除并改用以 /* 开头并以 */ 结尾的注释。

如果这不能解决问题，您可以通过将媒体查询中的动画属性更改为使用 !important exception 来测试它是否是特异性问题，如下所示：

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

如果这解决了您的问题，那么您遇到了特异性问题。

不要在代码中留下 !important 异常。 这个异常是一个有用的调试工具，但在生产代码中使用它会让你头疼不已.

相反，请阅读 MDN 上的 how to resolve specificity issues。

你的情况：

确保 "normal version" 和媒体查询版本都使用相同的 CSS 选择器。在您在此处发布的示例中，它们都只使用 #welcome - 这很好。如果你真的希望他们有不同的选择器，媒体查询的选择器应该比另一个更具体。
确保媒体查询的版本在"normal version"之后由浏览器处理。如果两组规则都在同一个文件中，那就意味着将媒体查询的规则集放在默认规则集之后。如果它们在单独的文件中，则意味着在 HTML.

之后链接媒体查询文件

如何摆脱媒体查询中的一个动画？

How can I get rid of one animation in a media query?

html

css

media

animation