CSS3 calculate animation delay to create a sliding effect

user_4065183 0
Viewed 860

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.

css-animations css html
1 Answers

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>

user_86203330
Related