title: Animate 3 columns (lists of names) across the screen from to bottom
body: <p>I am trying to animate 3 columns with a list of names in each across the screen from top to bottom I have managed to get it to work fine in Firefox but Chrome and Safari just lag out,</p>
  <p>I'm guessing it's because of the size of the divs (30k names split across 3 columns 516000px in height),</p>
  <p>I'm using CSS to animate each columns position using the translateY property,</p>
  <p>Here is an example of the code I've been using:</p>
  <pre><code>.names {  
      column-count: 3;
  
      ul {
          transform: translateY(100vh) translateZ(0);
          backface-visibility: hidden;
          perspective: 1000;
  
          &amp;:nth-child(2) {
              transform: translateY(-516000px) translateZ(0);
          }
  
          &amp;.show {
              animation-name: anim;
              animation-duration: 14s;
              animation-timing-function: ease-in-out;
  
              &amp;:nth-child(2) {
                  animation-name: anim2;
              }
          }
  
          li {
              display: block;
              padding: 10px 0;
              text-align: center;
          }
      }
  }
  
  @keyframes anim {
      0% { transform: translateY(100vh) translateZ(0); }
      100% { transform: translateY(-516000px) translateZ(0); }
  }
  
  @keyframes anim2 {
      0% { transform: translateY(-516000px); }
      100% { transform: translateY(100vh); }
  }
  </code></pre>
  <p>Here is an example of what I'm trying to do: <a href="https://jsfiddle.net/4qya150z/2/" rel="nofollow noreferrer">https://jsfiddle.net/4qya150z/2/</a></p>
  <p>Is there a better way to do this that would be more browser friendly?</p>
  <p>Any help would be greatly appreciated.</p>