title: Flickering when performing two css translations in html
body: <p>I have an html page where the main content is an image slideshow. Images are fade out and fade in using css transform.
  Along with this I have a marquee, in the page with css transform and animation.
  When the image switching occurs, marquee in the bottom is getting flickered. 
  Here is an example for the issue</p>
  
  <p><a href="https://codepen.io/roni-thomas/pen/WNbVJbm" rel="nofollow noreferrer">https://codepen.io/roni-thomas/pen/WNbVJbm</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 1;
  $(document).ready(function() {
    setInterval(function() {
      $(".visible_item")
        .removeClass("visible_item")
        .addClass("hidden_item");
      $("#" + i)
        .removeClass("hidden_item")
        .addClass("visible_item");
      i = i == 3 ? 0 : i + 1;
    }, 5000);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body,
  html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: black;
  }
  .marquee {
    overflow: hidden;
    position: fixed;
    color: #fff;
    bottom: 0px;
    background: #fff;
    font-size: 24px;
    font-family: Arial;
  }
  .marquee_p {
    margin: 0;
    text-align: center;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 40s linear infinite;
    -webkit-animation: scroll-left 40s linear infinite;
    animation: scroll-left 40s linear infinite;
    white-space: nowrap;
    color: #ff4000;
    line-height: 42px;
  }
  @keyframes scroll-left {
    0% {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    100% {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
  .image {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
  }
  .visible_item {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
  }
  .hidden_item {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
    -webkit-transition: visibility 0s 2s, opacity 2s linear;
    -moz-transition: visibility 0s 2s, opacity 2s linear;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
              &lt;img
                  id="0"
                  src="https://burst.shopifycdn.com/photos/coffee-with-milk.jpg"
                  class="image visible_item"
                  /&gt;
              &lt;img
                  id="1"
                  src="https://burst.shopifycdn.com/photos/journal-and-coffee-at-table.jpg"
                  class="image hidden_item"
                  /&gt;
              &lt;img
                  id="2"
                  src="https://burst.shopifycdn.com/photos/pour-over-coffee-to-order-at-cafe.jpg"
                  class="image hidden_item"
                  /&gt;
              &lt;img
                  id="3"
                  src="https://burst.shopifycdn.com/photos/but-first-coffee-written-next-to-a-cup-of-joe.jpg"
                  class="image hidden_item"
                  /&gt;
          &lt;/div&gt;
          &lt;div class="marquee"&gt;
              &lt;p class="marquee_p"&gt;
                  Lorem Ipsum is simply dummy text of the printing and typesetting
                  industry. Lorem Ipsum has been the industry's standard dummy text ever
                  since the 1500s, when an unknown printer took a galley of type and
                  scrambled it to make a type specimen book.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried almost all possible combinations mentioned in the below thread.</p>
  
  <p><a href="https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform">Prevent flicker on webkit-transition of webkit-transform</a></p>
  
  <pre><code>-webkit-backface-visibility: hidden;-webkit-transform:translate3d(0,0,0); etc
  </code></pre>
  
  <p>But this does not seems to solve the problem.</p>