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

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

＆＃13;

@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;
  }
}

＆＃13;

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

＆＃13;

我做了一个小改动，只是为了让效果更容易被注意到：我添加了＆＃34;无限＆＃34;旋转动画。这不是解决问题所必需的。

请注意，如果您在答案中运行此片段，则只有一个动画（因为片段窗口的宽度小于800px） - 但如果您将其启动整页，则会同时显示两个动画。

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

那么为什么它不适合你呢？它可能是一个特殊性问题，或者是因为您使用错误的语法插入注释。

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

如果这不能解决问题，您可以通过更改媒体查询中的动画属性来测试是否存在特异性问题，以便使用!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。

在你的情况下：

确保＆＃34;正常版本＆＃34;并且媒体查询版本都使用相同的CSS选择器。在您发布的示例中，他们都只使用#welcome - 这很好。如果你真的希望他们有不同的选择器，那么媒体查询的选择器应该比另一个更具体。
确保在＆＃34;普通版本＆＃34;之后浏览器处理媒体查询版本。如果两组规则都在同一个文件中，那只意味着将介质查询的规则集置于默认规则集之后。如果它们位于单独的文件中，则意味着在 HTML中的默认文件之后链接媒体查询文件。

Answer 2

首先，您取消设置第一个 animation，然后再将其与另一个关键帧一起应用。

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

<强> Working Fiddle

animation: none;

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

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

2 个答案: