Stop css animation @media max-width

Question

I have a simple fading slideshow and I want it to stop animating when the viewport's width is below 800px. All I can find is animation: none !important; but it doesn't seem to work. Here's my code:

fiddle edited with a smaller max-width and simple bg color: 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;
}
}

ud also get an answer much more quickly if u made a codepen or jsfiddle demo — oldboy, Oct 30 '18 at 02:51

score -1 · Answer 1 · answered Oct 30 '18 at 04:00

I found this worked. Pass your keyframes to a media query:

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

Stop css animation @media max-width

1 Answers1