css - CSS 中的自动幻灯片转换循环

Question

我需要将哪些 CSS 代码添加到我的代码中才能获得不间断的 slider 动画？我希望图片在不悬停时自动一张一张地幻灯片，每张幻灯片之间都有选定的时间范围。悬停功能已经添加到 css 中，因此不需要再次添加，您可以在此处轻松运行以进行检查出。

Please Run the Code in Full Screen mode.

HTML:

   /*  Exstyle Header Design */
#main-row102
.wrapper {
  width:auto;
  position:fixed;
	overflow:hidden;
}
.row {
  display: flex;
  width:100%;
  margin:0px;
}



.col-xs-3 {
  padding:0px;
  border:1px solid black;
  display:inline-block;
  width:calc(100% - 30px);
  height:340px;
  background:transparent;
  z-index:1;
}

.wrapper-background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index :0;
  transition: background 5s;
}

.wrapper:hover .col-xs-3 {
  background:none;
}
.wrapper:hover .col-xs-3:hover {
  background:red;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(1):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2018/09/30/19/03/railway-station-3714297_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}

.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(3):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2012/10/10/05/04/locomotive-60539_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(5):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2017/02/05/20/07/cloister-2041063_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}
.wrapper:hover .row:nth-child(1) .col-xs-3:nth-child(7):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2012/11/28/10/30/honor-guard-67636_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(1):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2016/12/30/10/03/dance-1940245_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}

.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(3):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2013/06/22/03/49/diveevo-140542_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(5):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2017/05/11/08/48/model-2303361_960_720.jpg");
  z-index:-1;
		background-repeat:no-repeat;
	background-size:100%;
}
.wrapper:hover .row:nth-child(2) .col-xs-3:nth-child(7):hover ~ .wrapper-background {
  background-image:url("https://cdn.pixabay.com/photo/2015/07/15/09/00/man-845847_960_720.jpg");
  z-index:-1;
	background-repeat:no-repeat;
	background-size:100%;
}

<div id="main-row-102"></div>
<div class="wrapper">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
  </div>
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
    <div class="col-xs-3"></div>
    <div class="wrapper-background"></div>
  </div>
</div>

Answer 1

为背景制作相同的架构，并在悬停列时启动动画。

#slider {
    background: #000;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
    width:100%;
    margin-top: 2%;
    overflow: visible;
    position: relative;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 40px;
}

/* Hide everything out of slider */
#mask {
    overflow: hidden;
    height: 240px;
}

/* The list of the images */

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 980px;
    height: 240px;
    position: absolute;
    top: -245px;	/* Initial position  (out of slider) */
    list-style: none;
}

.slider-img {
    border-radius: 5px;
}

#slider li.firstanimation {
   animation: cycle 20s linear infinite;
}

#slider li.secondanimation {
   animation: cycletwo 20s linear infinite;
}

#slider li.thirdanimation {
   animation: cyclethree 20s linear infinite;
}

#slider li.fourthanimation {
   animation: cyclefour 20s linear infinite;
}

/* Animation */

@keyframes cycle {
   0%  { top: 0px; } /* When animation starts we already see the first image */
   5%  { top: 0px; } /* Start position */
   20% { top: 0px; opacity:1; z-index:0; } /* From 5% to 20 % (3 secs) image visible */
   25% { top: 245px; opacity: 0; z-index: 0; } /* From 20% to 25% (1 sec) entrance of the image*/
   26% { top: -245px; opacity: 0; z-index: -1; } /* Return to the starting position out of mask */
   90% { top: -245px; opacity: 0; z-index: 0; }
   95% { top: -245px; opacity: 0; } /* From 95% to 100% (1 sec) – entrance */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -245px; opacity: 0; } /* The starting position out of the mask */
   20% { top: -245px; opacity: 0; }/* Start move from 20% */
   25% { top: 0px; opacity: 1; }
   30% { top: 0px; opacity: 1; }  /* From 25% to 30% (in 1 sec) — entrance*/
   45% { top: 0px; opacity: 1; z-index: 0; }   /* From 30% to 45% (3 sec) image is visible */
   50% { top: 245px; opacity: 0; z-index: 0; } /* From 45% to 50% (1 sec)— exit */
   95% { top: -245px; opacity: 0; z-index: -1; }   /* Return to the starting position out of mask */
   100%{ top: -245px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -245px; opacity: 0; }
   45% { top: -245px; opacity: 0; }
   50% { top: 0px; opacity: 1; }
   55% { top: 0px; opacity: 1; }
   70% { top: 0px; opacity: 1; }
   75% { top: 245px; opacity: 0; z-index: 0; }
   76% { top: -245px; opacity: 0; z-index: -1; }
   100%{ top: -245px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
    0%  { top: -245px; opacity: 0; }
    70% { top: -245px; opacity: 0; }
    75% { top: 0px; opacity: 1; }
    80% { top: 0px; opacity: 1; }
    95% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 245px; opacity: 0; z-index: 0; }
}

<div id="slider">
                        <div id="mask"> 
                            <ul>
                                <li id="first" class="firstanimation">
                                    <img class="slider-img"  src="https://coverfiles.alphacoders.com/455/45585.jpg"/>
                                </li>

                                 <li id="second" class="secondanimation">
                                    <img class="slider-img"  src="http://www.tuellaneinfantschool.org.uk/wp-content/uploads/2013/10/foxes-header.jpg"/>
                                 </li>

                                 <li id="third" class="thirdanimation">
                                    <img class="slider-img"  src="https://wallpapers.pub/web/wallpapers/fox-animal-wallpaper-hd/1500x500.jpg"/>
                                 </li>

                                 <li id="fourth" class="fourthanimation">
                                    <img class="slider-img"  src="https://coverfiles.alphacoders.com/484/48440.jpg"/>
                                 </li>
                            </ul>
                         </div>