title: CSS animation performance
body: <p>I have a small hobby project in which I try to build a matrix rain: <a href="https://i.stack.imgur.com/xqpEZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqpEZ.jpg" alt="&#39;matrix rain&#39;"></a>. </p>
  
  <p>See <a href="http://www.audenaerde.org/matrix.html" rel="nofollow noreferrer">demo</a> here. Or this <a href="https://jsfiddle.net/5o9uakkc/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>My question is: how can I make this more efficient, as I can see it gets slow when I add a lot of columns.</p>
  
  <p>I have implemented it as rendering a lot of <code>absolute</code> positioned <code>div</code>s that are animated.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>div
  {
      position:absolute;
      width:1em;
      display:inline-block;
      color: black;
      animation-name: example;
      animation-duration: 2s;
      text-shadow: none; 
  }
  
  @keyframes example 
  {
      0%   {color: white;  text-shadow: -1px 1px 8px white;}
      15%  {color: #5f5 ;  text-shadow: -1px 1px 8px #5f5 ;}
      100% {color: black;  text-shadow: none;}
  }
  </code></pre>
  
  <p>In javascript I set some custom styling for each <code>div</code>, where I vary some settings, like font-size, animation speed etc.</p>
  
  <p>Main part of the JS:</p>
  
  <pre><code>var textStrip = ['诶', '比', '西', '迪', '伊', '吉', '艾', '杰', '开', '哦', '屁', '提', '维'];
  
  var matrixcol = function()
  {
      var top =  Math.floor(Math.random() * $(window).height() * 0.5);
      var size = 10 + Math.floor(Math.random()*10);
      var col =  Math.floor(Math.random() * $(window).width() - size);
      var ms  =  500 + Math.floor(Math.random()*1500);
  
              var timer;
      var aap = function()
      {
          var randomNumber = Math.floor(Math.random()*textStrip.length);
  
          var newelem = $("&lt;div style='font-size:"+ size+ "px;top:"+top+"px; left:"+col+"px;animation-duration:"+ 2*ms + "ms'&gt;" + textStrip[randomNumber] +  "&lt;/div&gt;" );
          $('body').append(newelem);
          top+=size;
          setTimeout( function() {newelem.remove();}, (1.6*ms)-(ms/40)); 
          if (top&gt;$(window).height()-size)
          {
              size = 10 + Math.floor(Math.random()*10);
              top=0; Math.floor(Math.random() * $(window).height() * 0.5);
              col =  Math.floor(Math.random() * $(window).width() -size);
              ms = 500 + Math.floor(Math.random()*1500);
                              clearInterval(timer);
              timer = setInterval(aap, ms/40);
          }
      }
      timer = setInterval(aap, ms/40);
  
  }
  
  
  $( document ).ready(function() {
     var i;   
     for (i = 0; i &lt; 25; i++) {
         matrixcol();
  }
  </code></pre>
  
  <p>I have tried to use the chrome profiling, that shows my a warning: </p>
  
  <blockquote>
    <p>Long frame times are an indication of jank and poor rendering
    performance.</p>
  </blockquote>
  
  <p>The link that is provided gives some insight; however, as far a I can see I don't have much layouting going on. </p>
  
  <p><strong>tl;dr</strong> 
  It is slow. What would be a good performance optimizations? </p>