CSS3 calculate animation delay to create a sliding effect - html

Question

I have a question with the animation delay. I have a list of 6 images, so I would like to create a auto sliding carousel effect. So I have already make them go through the translation in CSS animation. However, the timing for the images to run is not well calculated, therefore, when looking at it, the images will overlap briefly. What I want to achieve is to make the images do not overlap and runs in a loop smoothly. I have created a fiddle.
.banner ul {
list-style: none;
margin: 0;
padding: 0;
width: 300px;
height: 200px;
display: inline-block;
position: relative;
}
.banner ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: coverflow 9.5s ease infinite;
}
.banner ul li:nth-child(2) {
animation-delay: 1.5s;
}
.banner ul li:nth-child(3) {
animation-delay: 3s;
}
.banner ul li:nth-child(4) {
animation-delay: 4.5s;
}
.banner ul li:nth-child(5) {
animation-delay: 6s;
}
.banner ul li:nth-child(6) {
animation-delay: 7.5s;
}
.banner ul li:nth-child(7) {
animation-delay: 9s;
}
.banner ul li img {
width: 100%;
height: 100%;
}
#keyframes
coverflow {
0%, 10% {
opacity: 1;
transform: none;
z-index: 10;
}
25%, 35% {
opacity: 0.2;
transform: translate3d(-170px, 0, 0) scale(0.6);
}
50% {
opacity: 0;
transform: translate3d(-190px, 0, 0) scale(0.6);
}
60% {
opacity: 0;
transform: translate3d(190px, 0, 0) scale(0.6);
}
75%, 85% {
opacity: 0.2;
transform: translate3d(170px, 0, 0) scale(0.6);
}
}
here is the fiddle
https://jsfiddle.net/4anedqzp/2/
thanks you very much.

Answer 1

You may try this :
I made the animation to start from a new state to avoid the overlap. I also modified the duration to 9s to always have the same cycle each time.
.banner {
text-align: center;
}
.banner ul {
list-style: none;
margin: 0;
padding: 0;
width: 300px;
height: 200px;
display: inline-block;
position: relative;
}
.banner ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: coverflow 9s ease infinite;
opacity: 0.2;
z-index: -1;
transform: translate3d(170px, 0, 0) scale(0.6);
}
.banner ul li:nth-child(2) {
animation-delay: 1.5s;
}
.banner ul li:nth-child(3) {
animation-delay: 3s;
}
.banner ul li:nth-child(4) {
animation-delay: 4.5s;
}
.banner ul li:nth-child(5) {
animation-delay: 6s;
}
.banner ul li:nth-child(6) {
animation-delay: 7.5s;
}
.banner ul li:nth-child(7) {
animation-delay: 9s;
}
.banner ul li img {
width: 100%;
height: 100%;
}
#keyframes coverflow {
0%,
10% {
opacity: 0.2;
z-index: -1;
transform: translate3d(170px, 0, 0) scale(0.6);
}
10%,
25% {
opacity: 1;
transform: none;
}
25%,
45% {
opacity: 0.2;
z-index: -1;
transform: translate3d(-170px, 0, 0) scale(0.6);
}
60% {
opacity: 0;
z-index: -1;
transform: translate3d(-190px, 0, 0) scale(0.6);
}
70% {
opacity: 0;
z-index: -1;
transform: translate3d(190px, 0, 0) scale(0.6);
}
}
<div class="banner">
<ul>
<li><img src="https://lh3.googleusercontent.com/wdFgfoxO5xFb5s194SbECtHEe-HU3BfM5MqL3896G1esFN02J_aqp5yaQ39-IMHqRjY=w300"></li>
<li><img src="https://pbs.twimg.com/profile_images/875822477225734146/6I5lQUof_400x400.jpg"></li>
<li><img src="http://study.com/cimages/multimages/16/solid_shape_dice.jpg"></li>
<li><img src="https://lh3.googleusercontent.com/kIy-fJ9XgrZlOeMRUY5lJslDDhTCxddxh9Vwpitm-vOaFkYgLW0yFGcpgfWYatFwrVE=w300"></li>
<li><img src="https://www.jaapsch.net/puzzles/images/square1.jpg"></li>
<li><img src="http://www.op-art.co.uk/op-art-gallery/var/albums/your-op-art/GDHarley_OP-ART_%2311.jpg?m=1382213140"></li>
</ul>
</div>