Question

我有一个简单的淡入淡出幻灯片，当视口的宽度小于800px时，我希望它停止动画显示。我只能找到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;
}
}

Answer 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}
    }
}

停止CSS动画@media max-width

1 个答案: