在媒体查询中禁用CSS动画

Question

我正在尝试在@media内禁用我在CSS中使用的动画，因此它们不能在移动设备上使用。 HTML / CSS / JS在代码片段中。现在，我通过将.half-width-text规则应用于.open来禁用div的文本过渡。
但是如何禁用第一个列表的关键帧动画？

$(document).on('click', 'a[href^="#"]', function (event) {
    //prevent direct jump to the linked element
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});


(function($) {
  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

var win = $(window);

var allModifications = $(".half-width-content");


//make all elements visible that are directly visible
allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.find(".half-width-text").addClass("open"); 
    el.find(".list-div ul li").addClass("animate");
  } 
});


//make elements visible that get scrolled into the viewport
win.scroll(function(event) {
  var current = 1;
  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open"); 
      el.find(".list-div ul li").each(function(){
        $(this).addClass("animate").css("animation-delay", current + 's');
        current++;
      });
    } 
  });
  
});

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: beige;
}
.container > div {
  min-height: 100vh;
  border:1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}
.container > div > a > .dot{
  position: relative;
  transition: background .2s linear;
  left: 50%;
  bottom: 10%;
  z-index: 101;
    height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}
.container > div > a  > .dot > .arrow-down {
  transition: border .2s linear;
  position: absolute;
  top:11%;
  left: 24%;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}
.container > div > a .dot:hover{
  background: black;
}
.container > div > a .dot:hover > .arrow-down{
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
}
.container > div > a > .dot > .arrow-down{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

.video-iframe.fullsize{
  height: 100%;
  width: 100%;
}

.list{
  list-style: none;
  text-align: center;
}

.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
  position: relative;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
  position: absolute;
  width: 90%;
  height: 90%;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.half-width > .half-width-content > .half-width-text {
  position: absolute;
  left: 50%;
  top: 150%;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 2s linear;
}
.half-width > .half-width-content > h1{
  position: relative;
  top: 15%;
  text-align: center;
}

.half-width > .half-width-content > .half-width-text.open{
  visibility: visible;
  top: 50%;
}


.list-div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-div ul {
  padding: 0;
  width: 75%;
}

.list-div li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: hidden;
}

.list-div li.animate{
  visibility: visible;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 220px;
  }
  25%{
    opacity: 0.3;
  }
  
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

.full-width > .content > .third-parent{
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width > .content > .third-parent > .third{
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
}

.full-width > .content > .third-parent > .third > img{
  position: absolute;
  width: 50%;
  height: 50%;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width > .content > .third-parent > .third > .middle-text{
  position: absolute;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


@media only screen and (max-width: 768px){
.full-width > .content > .third-parent{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.half-width{
	width: 100%;
}

div:has(> .instagram-slideshow){
	display: none;
}
.list-div {
  position: relative;
  left: 50%;
  top:50%;
  width: 75%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.list-div li {
	transition: none;
	visibility: visible;
}
.half-width > .half-width-content > .half-width-text{
	transition: none;
  visibility: visible;
  top: 50%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
  <div class="full-width">
<iframe class="video-iframe fullsize" src="https://www.youtube.com/embed/some_vid" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <a href="#section2">
      <span class="dot">
        <i class="arrow-down"></i>
      </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
              <h1>Headline h1</h1>
      <div class="half-width-text">

        <div class="text-content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="1">
        <img src="http://placekitten.com/200/300">
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="2">
        <img src="https://fakeimg.pl/350x200/?text=Hello">
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="list-div">
        <ul class="items-list" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://placeimg.com/640/480/animals">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline h1</h1>
            <ul>
              <li>Entry A</li>
              <li>Entry B</li>
              <li>Entry C</li>
              <li>Entry D</li>
            </ul>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://placeimg.com/640/480/animals">
        </div>
         </div>
       </div>

</div>
</div>

Answer 1

您好，如果您想使用@media进行一些响应式设计，则应该首先考虑座右铭移动代码，然后再使用更大的屏幕。因此，如果您以这种哲学开始，则更容易与之合作 例如@media only screen and (min-width: 600px)。您也可以在这里https://css-tricks.com/animated-media-queries/