停止css动画@媒体最大宽度

我有一个简单的淡入淡出幻灯片，我希望它在视口的宽度低于800px时停止动画。我只能找到

动画：无！重要的但它似乎不起作用。这是我的密码：

使用较小的最大宽度和简单的背景颜色编辑小提琴：

HTML:

我发现这很管用。将关键帧传递到媒体查询：

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

你也可以附加html标记吗？哦，对不起。如果你做了一个代码笔或JSFIDLE演示，你应该用逗号来分隔你的类，而不是用空格
/* -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;
}
}

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