覆盖CSS类的动画不起作用

Question

I have the following HTML/CSS/JS. I want to disable the keyframe animation for the list-div li childs on mobile devices or screen width below 780px. Because I don't want to mess arround with a JavaScript solution by reading the user agent I thought of overriding the animation class that gets added.
Howevert that does not work. So why I want to override the class and disable the animation is because I want to align the li to the corner of the list div, like: li:nth-child(1){top: 0; left:0;} li:nth-child(1){top: 0; left:0;} by absolute positioning.
Here is the code snippet, I also pasted it in a codepen fo screen width testing: https://codepen.io/anon/pen/JaZgrX

  current = 1; $(".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; } .half-width { width:50%; } .half-width > .half-width-content{ position: relative; margin-top: 0; height: 100%; width: 100%; } .list-div { display: flex; justify-content: center; align-items: center; } .list-div ul { padding: 0; margin-top: 15%; 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; } } @media max-width:768px{ .list-div li.animate{ visibility: visible; } .list-div { display: flex; justify-content: center; align-items: center; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="half-width"> <div class="half-width-content" id="list-cont"> <div class="list-div"> <ul> <li>Entry A</li> <li>Entry B</li> <li>Entry C</li> <li>Entry D</li> </ul> </div> </div> </div> </div> 

Answer 1

I think this is what you need. Switch to full page view to see the animation.

 current = 1; $(".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; } .half-width { width: 50%; } .half-width>.half-width-content { position: relative; margin-top: 0; height: 100%; width: 100%; } .list-div { display: flex; justify-content: center; align-items: center; } .list-div ul { padding: 0; margin-top: 15%; 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; } } @media (max-width:768px) { .list-div ul { margin-top: 0; } .list-div li.animate { visibility: visible; animation: none; } .list-div { display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; width: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="half-width"> <div class="half-width-content" id="list-cont"> <div class="list-div"> <ul> <li>Entry A</li> <li>Entry B</li> <li>Entry C</li> <li>Entry D</li> </ul> </div> </div> </div> </div>