title: CSS Slider Using `transform: translateX` To Cycle Through Images
body: <p>Is it possible to have a CSS slider cycle through two images when animating them with the <code>translateX</code> transform property?</p>
  <p>I'm facing a couple of issues:</p>
  <ol>
  <li><p>I can't seem to get the second image to show even though it is in the HTML unless I use <code>position: absolute</code> and then the <code>overflow: hidden</code> doesn't work on the parent?</p>
  </li>
  <li><p>How do I reset the first image to go back to the beginning to start it all again?</p>
  </li>
  </ol>
  <p><strong>Note:</strong> in the animation shorthand, the animation lasts for 2.5s and there is an initial delay of 3s.</p>
  <p>I only want to do with this with the <code>translateX</code> property because I want the 60FPS smoothness (it will be done with <code>translate3d</code> when completed, but to make the code easier to read I've used translateX). I don't wish to animate <code>margin: left</code> or the <code>left</code> property etc.</p>
  <p>Any help would be amazing.</p>
  <p>Code is below or link to Codepen: <a href="https://codepen.io/anna_paul/pen/ZEJrvRp" rel="noreferrer">https://codepen.io/anna_paul/pen/ZEJrvRp</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  
  .container {
    width: 500px;
    height: 333px;
    overflow: hidden;
  }
  
  .slider-wrapper {
    display: flex;
  }
  
  .image {
    display: block;
  }
  
  .hero-image-1 {
    transform: translateX(0);
    animation: slide-out-image-1 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1)
      forwards;
  }
  
  @keyframes slide-out-image-1 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  .hero-image-2 {
    transform: translateX(100%);
    animation: slide-in-image-2 2.5s 3s cubic-bezier(0.54, 0.12, 0.44, 1) forwards;
  }
  
  @keyframes slide-in-image-2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="slider-wrapper"&gt;
      &lt;picture&gt;
        &lt;img class="image hero-image-1" src="https://drive.google.com/uc?export=view&amp;id=1l7cTX35wqd-4eYvFL8A5QLZ7LbOF9m4J"&gt;
      &lt;/picture&gt;
      &lt;picture&gt;
        &lt;img class="image hero-image-2" src="https://drive.google.com/uc?export=view&amp;id=1iB9R1aoeYSmkPX9Ju3NNOZhKylOjCA0y"&gt;
      &lt;/picture&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>