停止css动画@media max-width [重复]答案

【问题标题】：Stop css animation @media max-width [duplicate]停止css动画@media max-width [重复]
【发布时间】：2018-10-30 14:02:33
【问题描述】：

我有一个简单的渐变幻灯片，我希望它在视口宽度低于 800 像素时停止动画。我只能找到animation: none !important;，但它似乎不起作用。这是我的代码：

使用较小的最大宽度和简单的 bg 颜色编辑的小提琴： https://jsfiddle.net/alaisl/z2esy1uw/

HTML：

 <div id="slide01">

        <div class='sliderwrap'>
            <div class="wmslogo">
                <img src="img/wmslogo.png" id="wmsidlogo" /><br>
                WORLDCLASS MANPOWER SERVICES
            </div>

            <div class='himg1'></div>
            <div class='himg2'></div>
            <div class='himg3'></div>
        </div>

    </div>

CSS：

/* -SLIDE01------------------------------------------------- */

#slide01 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-color: transparent;
}

.sliderwrap {
  max-width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.wmslogo {
  position: absolute;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: white;
  font: 3vw copperplate;
  z-index: -1;
}

#wmsidlogo {
  max-width: 40vw;
  height: auto !important;
}

.himg1, .himg2, .himg3 {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: -2;
}

.himg1 {
  background: url(img/01.jpg)no-repeat center;
  background-size: cover;
  animation: fade 28s infinite;
  -webkit-animation: fade 28s infinite;
}

.himg2 {
  background: url(img/02.jpg)no-repeat center;
  background-size: cover;
  animation: fade2 28s infinite;
  -webkit-animation: fade2 28s infinite;
}

.himg3 {
  background: url(img/03.jpg)no-repeat center;
  background-size: cover;
  animation: fade3 28s infinite;
  -webkit-animation: fade3 28s infinite;
}


/* KEYFRAMES-------START */

@keyframes fade
  {
    0%   {opacity:1}
    33.333% { opacity: 0}
    66.666% { opacity: 0}
    100% { opacity: 1}
  }
  @keyframes fade2
  {
    0%   {opacity:0}
    33.333% { opacity: 1}
    66.666% { opacity: 0 }
    100% { opacity: 0}
  }
  @keyframes fade3
  {
    0%   {opacity:0}
    33.333% { opacity: 0}
    66.666% { opacity: 1}
    100% { opacity: 0}
  }

/* KEYFRAMES-------END */

@media only screen and (max-width: 800px) {
  .slide01 .himg1 .himg2 .himg3 {
    animation: none !important;
    -webkit-animation: none !important;
    display: none;
}
  .slide01 {
    background-color: bisque;
    background-size: cover;
}
}

【问题讨论】：

能否也附上html标记？
哦，对不起。我现在已经添加了。
如果您制作了 codepen 或 jsfiddle 演示，也会更快地得到答案
你应该使用逗号来分隔你的班级，而不是空格

标签： css animation media-queries responsive

【解决方案1】：

我发现这行得通。将关键帧传递给媒体查询：

@media only screen and (min-width: 801px) {
    @keyframes fade
    {
        0%   {opacity:1}
        33.333% { opacity: 0}
        66.666% { opacity: 0}
        100% { opacity: 1}
    }
    @keyframes fade2
    {
        0%   {opacity:0}
        33.333% { opacity: 1}
        66.666% { opacity: 0 }
        100% { opacity: 0}
    }
    @keyframes fade3
    {
        0%   {opacity:0}
        33.333% { opacity: 0}
        66.666% { opacity: 1}
        100% { opacity: 0}
    }
}

【讨论】：