title: Slide long image horizontally (full screen)
body: <p>Could do with some help.</p>
  
  <p>I need to slide a long image horizontally once and then back... I've followed a tutorial here <a href="https://css-tricks.com/creating-a-css-sliding-background-effect/" rel="nofollow noreferrer">https://css-tricks.com/creating-a-css-sliding-background-effect/</a> and its all working. My problem is I want the sliding image to be fullscreen (the image height needs to fit the browser viewpoint). Current image is 7676 x 3939. background-size: cover was an option but image is too large so it doesn't fit height-wise. So I'd like half the image (3838px - fullscreen) to show initially then slide to the other half and then back. </p>
  
  <p>Would appreciate some assistance. Below is my code. Thanks.</p>
  
  <pre><code>.wrapper {
      overflow: hidden;
  }
  
  .sliding-background {
      background: url("long-image.jpg") center;
      height: 100vh;
      width: 7676px;
      animation: slide 3s linear 1;
  }
  
  @keyframes slide {
      0%{
          transform: translate3d(0, 0, 0);
      }
      50%{
          transform: translate3d(-3838px, 0, 0);
      }
      100%{
          transform: translate3d(0, 0, 0);
      }
  }
  </code></pre>