infinite loop slider using keyframes css3

by

An idea is to also move the first image to make it at the end to create the duplicate effect. This will be done behind so no one will see it then you can adjust to make the first slide take less time:

.inner {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position:relative;
}

.images-wrapper {
  display: flex;
  align-items: center;
  animation: slideToLeft 10s ease infinite 1s;
}
img:first-child {
  z-index:-1;
  animation: image-change 10s ease infinite 1s;
}

@keyframes image-change {
 0%,50% {
    transform: translateX(0%);
  }
  70%,100% {
    transform: translateX(300%);
  }
}

@keyframes slideToLeft {
  0%,
  10% {
    transform: translateX(0);
  }
  15%,
  45% {
    transform: translateX(-100%);
  }
  50%,
  80% {
    transform: translateX(-200%);
  }
  85%,
  100% {
    transform: translateX(-300%);
  }
}
<div class="inner">
  <div class="images-wrapper">
    <img src="http://via.placeholder.com/200x200/ff0000" alt="">
    <img src="http://via.placeholder.com/200x200/00ff00" alt="">
    <img src="http://via.placeholder.com/200x200/0000ff" alt="">
  </div>
</div>

More Related Contents:

  1. How to keep origin in center of image in scale animation?
  2. How to make blinking/flashing text with CSS 3
  3. How can I create a marquee effect?
  4. Rotate objects around circle using CSS?
  5. Imitating a blink tag with CSS3 animations
  6. Animating Linear Gradient using CSS
  7. left-right movement.. css only very generic
  8. CSS border color switch animation: “from” color not correct
  9. How to Animate Gradients using CSS
  10. How to run the CSS3 animation to the end if the selector is not matching anymore?
  11. Ring-shaped process spinner with fading gradient effect around the ring
  12. CSS animate custom properties/variables
  13. How to keep styles after animation?
  14. How to center an element horizontally and vertically
  15. Make container shrink-to-fit child elements as they wrap
  16. Element will not stay centered, especially when re-sizing screen
  17. CSS selector by inline style attribute
  18. HTML/CSS – Best practice for preserving white space on certain elements?
  19. Bootstrap – align button to the bottom of card
  20. How is the margin-top percentage calculated?
  21. How to align flexbox columns left and right?
  22. Inline Form nested within Horizontal Form in Bootstrap 3
  23. How can I make a div with irregular shapes with css3 and html5?
  24. How do I add a highlight behind the text via CSS so it looks like Instagram-one below?
  25. Font-Face Not loaded
  26. It is possible to expand a textarea only with CSS?
  27. How to apply padding to every line in multi-line text?
  28. How do I stretch a background image to cover the entire HTML element?
  29. CSS override rules and specificity
  30. How can I control the height of an Option element in Webkit?

Leave a Comment