Implement slideshow with pure CSS3 and css3 carousel

Implement slideshow with pure CSS3 and css3 carousel
Preface

Compared with JavaScript control, the slideshow effect implemented by pure css3 is much simpler and more efficient, but its functions are more uniform. Only carousel can be switched manually.

What is the implementation? Page Layout + animation

HTML section

<Div class = "container"> <div class = "title-container"> View Code
The html part is also those, the container + multiple carousel image subitems
Layout
/*reset*/html,body,div,ul,li,img,h1,a{  margin: 0;  padding: 0;}ul{  list-style: none;}/*slide style*/html,body{  width: 100%;  height: 100%;}body{  background: url('./../images/bg.png') repeat;}.container{  width: 1000px;  height: 100%;  margin: 0 auto;}.container .title-container{  width: 800px;  height: 100px;  line-height: 100px;  margin: 20px auto;  text-align: center;}.slide-box{  position: relative;  width: 800px;  height: 533px;  margin: 0 auto;  border:5px solid #eaeaea;    -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);            box-shadow:1px 1px 5px rgba(0,0,0,0.7);}.slide-box ul{  position: relative;  width: 100%;  height: 100%;  overflow: hidden;}.slide-box ul li{  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  cursor: pointer;}.slide-box ul li .tooltip{  position: absolute;  left: 50px;  top: -40px;  height: 40px;  width: 100px;  text-align: center;  background-color: rgba(0,0,0,0.7);  color: #fff;  line-height: 40px;  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;}.slide-box ul li:hover .tooltip{  top: 2px;  z-index: 2;}
View Code
1. Hide container Overflow
2. Absolute positioning of carousel subitem
Carousel Animation
This part is the focus of this article.
To achieve carousel with pure css3, you must use the animation in an infinite loop and control the animation effect of each subitem separately. The overall effect is perfect.
The subitem uses absolute positioning, and the carousel effect needs to be achieved from left to right. Therefore, you can control the left value to achieve display and hide (positioned outside the container to hide) and slide effect. First implement the first sub-item
.slide-box ul li.slide1{  -webkit-animation: slide1 25s linear infinite;           animation: slide1 25s linear infinite;}@-webkit-keyframes slide1 {  0%  {    left: 0;    opacity: 1;  }  16%  {    left: 0;    opacity: 1;  }  20%  {    left: 800px;    opacity: 0;    z-index: 0;  }  21% {    left: -800px;    opacity: 0;    z-index: 0;  }  95% {    left: -800px;    opacity: 0;    z-index: 1;  }  96% {    left: -800px;    opacity: 0;    z-index: 1;  }  100% {    left: 0;    opacity: 1;    z-index: 1;  }}
The design carousel cycle is 25 s, so each subitem has 5s of presentation and moving time. Animation Effect of subitem 1: 0-4 s display, 4-5 s sliding to the right to hide outside the container, then quickly slide outside the left of the container to hide (at this time, the z-index is modified, so it does not affect the items being displayed. The rest of the time is to wait for the next slide and display on the left. The animation effect of the second sub-item must be consistent with that of the first sub-item, especially in time, so that the overall effect will be good. As follows:
.slide-box ul li.slide2{  -webkit-animation: slide2 25s linear infinite;          animation: slide2 25s linear infinite;}@-webkit-keyframes slide2 {  0%  {    left: -800px;    opacity: 0;    z-index: 0;  }  16%  {    left: -800px;    opacity: 0;    z-index: 1;  }  20%  {    left: 0;    opacity: 1;    z-index: 1;  }  36% {    left: 0;    opacity: 1;    z-index: 1;  }  40% {    left: 800px;    opacity: 0;    z-index: 0;  }  41% {    left: -800px;    opacity: 0;    z-index: 0;  }  100% {    left: -800px;    opacity: 0;    z-index: 0;  }}
The second sub-item 1-4 s waits outside the left side of the container, and 4-5 s slides out to the right (at this time, the first sub-item slides out to the left to hide), 5-9 s shows 9-10 s slides out to the left to hide.
Similarly, if the remaining sub-item is adjusted sequentially, the overall effect will be smooth.
Progress bar Animation
Because the display time is 4 s long, you can add a progress bar to improve the interactive experience. The div. progress in HTML is the structure of the progress bar. The style is as follows:
.slide-box .progress{  position: absolute;  bottom: 0;  left: 0;  height: 5px;  width: 0;  background-color: rgba(0,0,0,0.7);  -webkit-animation: progress 5s linear infinite;          animation: progress 5s linear infinite;  z-index: 2;}@-webkit-keyframes progress {  0%{    width: 0;  }  80%{    width: 100%;  }  81%{    width: 0;  }  100%{    width: 0;  }}
The progress is identified by controlling the width.
Hover pause Animation
If you need to pause the animation when hovering, use the animation-play-state: paused control.
.slide-box:hover ul li,.slide-box:hover .progress{  -webkit-animation-play-state: paused;          animation-play-state: paused;}
 
Conclusion
Although the functions are simple, the efficiency of pure css3 implementation is still very high, and the effect is also good --------- see the demo