javascript - Random Keyframe Positions Every Iteration to Create Falling "Matrix Code" -

i'm attempting make html web page animated css classes on many independent divs moving own randomly generated positions. have 20 elements randomly generated characters falling top of page , dissipating move along y-axis (like matrix code).

edit: jsfiddle demo remember range wide, group of characters generate far off right (outside small viewing window)

generating random char in top javascript

<script type="text/javascript">     $(document).ready(function() {      });      function generatechar()     {         var text = "";         var possible = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789«‘¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*駰ç_:è+òàù,.-";         text = possible.charat(math.floor(math.random() * possible.length));         return text;      }  </script> 

html of 20 divs

<div id="m1 " class="timespan movement"></div> ... <div id="m20" class="timespan movement"></div> 

javascript: here i've randomly generated characters (successfully) 1 random position. elements start in same position instead of starting own spots.

<script type="text/javascript">      document.getelementbyid("m1 ").innerhtml = generatechar();     ...     document.getelementbyid("m20").innerhtml = generatechar();       var divs = document.getelementsbytagname("div");      for(var = 0; < divs.length; i++){          var xrandom = math.round(math.random() * 2000);          var ybegran = math.round(math.random() * 150);          var yendran = math.round(math.random() * (2000 - 650) + 650);         var secran  = math.round(math.random() * (20));            var style = document.documentelement.appendchild(document.createelement("style")),         rule = " moveminus {\             0%   {\                 opacity: 1;\             }\             100%   {\                 opacity: 0; \             }\             {\                 top: " + ybegran + "px; left: " + xrandom + "px;\             }\             {\                 top: " + yendran + "px; left: " + xrandom + "px;\             }\         }";          if (cssrule.keyframes_rule) {             style.sheet.insertrule("@keyframes" + rule, 0);         } else if (cssrule.webkit_keyframes_rule) {             style.sheet.insertrule("@-webkit-keyframes" + rule, 0);         }          divs[i].innerhtml = makeid();      } </script> 

css

.body-m{   background-color: black;   overflow: hidden; }  .movement{   position: absolute;   font-size: 20px;    color: limegreen;   background-color: transparent;   overflow: hidden;  }  @keyframes moveminus {   { top: 0px; left: 21px; }     { top: 600px; left: 21px; }   0%   { opacity: 1; }   100% { opacity: 0; } }  .timespan{   animation: moveminus 7s infinite; } 

how iterate through divs' styles?

hi made fiddle, fiddle, i'm not sure that's wanted result can edit =)

here main function :

function setdiv(_div){         var xrandom = math.round(math.random() * 2000);          var ybegran = math.round(math.random() * 600);          var yendran = math.round(math.random() * (2000 - 650) + 650);         var secran  = math.round(math.random() * (20)) + 10;            _div.style.opacity = 1;         _div.style.top = ybegran +"px";         _div.style.animationduration = secran +"s";         _div.style.left = xrandom + "px";         _div.innerhtml = generatechar();     }