CSS3 Only Slider with continuous rotation

Question

I have been working on a slider that I want to auto-rotate through 3 images every 4 seconds but I haven't be able to make the CSS3 Animation work.

When I enable the starting state of the images to opacity 0 they fade and never respond to my keyframes.

You can see my code on jsfiddle here: https://jsfiddle.net/fchrisb/6wep1qL7/8/

 @import url("https://fonts.googleapis.com/css?family=Just+Another+Hand"); body, html { width: 100%; height: 100%; margin: 0; font-family: 'Just Another Hand', cursive; overflow-X: hidden; } .container { margin: 0px auto; position: relative; width: 100%; height: 0; padding-bottom: 66%; user-select: none; background-color: #1c1c1c; /* box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.24); */ } .container input { display: none; } .container .slide_img { position: absolute; width: 100%; height: 100%; z-index: -1; } .container div.slide_img { animation: move_slide2 12s infinite; //opacity: 0; } .container>div#one { animation-delay: 0; } .container>div#two { animation-delay: 4s; } .container>div#three { animation-delay: 8s; } .container .slide_img a { width: 100%; height: 100% } .container .slide_img img { width: inherit; height: inherit; } .container .slide_img .prev, .container .slide_img .next { width: 5%; height: inherit; position: absolute; top: 0; background-color: rgba(255, 82, 82, 0.2); z-index: 99; transition: .45s; cursor: pointer; text-align: center; } .container .slide_img .next { right: 0; } .container .slide_img .prev { left: 0; } .container .slide_img .prev:hover, .container .slide_img .next:hover { transition: .3s; background-color: rgba(255, 82, 82, 0.8); } .container .slide_img .prev span, .container .slide_img .next span { position: absolute; width: 0px; height: 0px; border: solid 20px; top: 50%; transform: translateY(-50%); } .container .slide_img .prev span { border-color: transparent #fff transparent transparent; right: 30%; } .container .slide_img .next span { border-color: transparent transparent transparent #fff; left: 30%; } .container #nav_slide { width: 100%; bottom: 12%; height: 11px; position: absolute; text-align: center; z-index: 99; cursor: default; } .container #nav_slide .dots { top: -5px; width: 18px; height: 18px; margin: 0 3px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); transition: .4s; cursor: pointer; } .container #nav_slide #dot1:hover { background: #795548; } .container #nav_slide #dot2:hover { background: #F44336; } .container #nav_slide #dot3:hover { background: #2196F3; } #i1:checked~#one, #i2:checked~#two, #i3:checked~#three { z-index: 9; animation: scroll 1s ease-in-out; } #i1:checked~#nav_slide #dot1 { background: #795548; } #i2:checked~#nav_slide #dot2 { background: #F44336; } #i3:checked~#nav_slide #dot3 { background: #2196F3; } @keyframes scroll { 0% { opacity: .4; } 100% { opacity: 1; } } @keyframes move_slide2 { 25% { opacity: 1; } 40% { opacity: 0; } } @media screen and (max-width: 800px) { .container { border: none; width: 100%; height: 0; padding-bottom: 66%; margin-top: 0px; } .container .slide_img .prev, .container .slide_img .next { width: 10%; } .container .slide_img .prev span, .container .slide_img .next span { border: solid 12px; } .container .slide_img .prev span { border-color: transparent #fff transparent transparent; } .container .slide_img .next span { border-color: transparent transparent transparent #fff; } .container #nav_slide .dots { width: 12px; height: 12px; } } 

 <div class="container"> <input type="radio" id="i1" name="images" checked/> <input type="radio" id="i2" name="images" /> <input type="radio" id="i3" name="images" /> <div class="slide_img" id="one"> <a href="https://marcomcentral.app.pti.com/Worth_Higgins_%26_Assoc.,_Inc./Access/catalog.aspx?uigroup_id=530928"><img src="https://worthhiggins.startlogic.com/wha/access/images/image_1c.jpg" style="border: 0;"></a> <label class="prev" for="i4"><span></span></label> <label class="next" for="i2"><span></span></label> </div> <div class="slide_img" id="two"> <a href="https://marcomcentral.app.pti.com/Worth_Higgins_%26_Assoc.,_Inc./Access/catalog.aspx?uigroup_id=530928"><img src="https://worthhiggins.startlogic.com/wha/access/images/image_2c.jpg" style="border: 0;"></a> <label class="prev" for="i1"><span></span></label> <label class="next" for="i3"><span></span></label> </div> <div class="slide_img" id="three"> <a href="https://marcomcentral.app.pti.com/Worth_Higgins_%26_Assoc.,_Inc./Access/catalog.aspx?uigroup_id=530928"><img src="https://worthhiggins.startlogic.com/wha/access/images/image_3c.jpg" style="border: 0;"></a> <label class="prev" for="i2"><span></span></label> <label class="next" for="i4"><span></span></label> </div> <div id="nav_slide"> <label for="i1" class="dots" id="dot1"></label> <label for="i2" class="dots" id="dot2"></label> <label for="i3" class="dots" id="dot3"></label> </div> </div> 

The css for the main animation element can be found on css line 28 The Keyframe - move_slide can be found on the css on line 137

Answer 1

The issue here is that you are running two animations on the same element that try to manipulate the same property - both move_slide2 and scroll are trying to change the opacity, each its own way. scroll takes precedence and so, move_slide2 is ignored.

There are other issues with the move_slide2 animation, but they should be resolved based on how you resolve the conflict mentioned above.

Answer 2

Your animations are cancelling each other out. You can set them on the same line and that should solve the problem. Here's how animation: animationName1 2s infinite, animationName2 2s Infinite Basically you just put commas between the two animations.