title: CSS random animation
body: <p>My idea is to make an image to dismember into little parts that will scale down, while they fly away.</p>
  
  <p>I've managed to do that with a couple of CSS animations -<code>scale</code> + <code>translate3d</code>-(the results aren't great but it's a start).</p>
  
  <p>Now, the problem is that I would like the translations to be random. 
  As far as I've understood, there is a simple way involving JS/Jquery/GSAP, and a little more complicated way involving SCSS/Sass...</p>
  
  <p>I'm unfamiliar with all of them.</p>
  
  <p>I've found a code that uses javascript to randomize a rotation, and I have adapted it to my translation.</p>
  
  <p>The code was posted <a href="https://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable?rq=1">here</a> as an answer.</p>
  
  <pre><code>// search the CSSOM for a specific -webkit-keyframe rule
  function findKeyframesRule(rule)
  {
      // gather all stylesheets into an array
      var ss = document.styleSheets;
  
      // loop through the stylesheets
      for (var i = 0; i &lt; ss.length; ++i) {
  
          // loop through all the rules
          for (var j = 0; j &lt; ss[i].cssRules.length; ++j) {
  
              // find the -webkit-keyframe rule whose name matches our passed       over parameter and return that rule
              if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE &amp;&amp; ss[i].cssRules[j].name == rule)
                  return ss[i].cssRules[j];
          }
      }
  
      // rule not found
      return null;
  }
  
  // remove old keyframes and add new ones
  function change(anim)
  {
      // find our -webkit-keyframe rule
      var keyframes = findKeyframesRule(anim);
      // remove the existing 38% and 39% rules
      keyframes.deleteRule("38%");
      keyframes.deleteRule("39%");
      // create new 38% and 39% rules with random numbers
      keyframes.insertRule("38% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }");
      keyframes.insertRule("39% { -webkit-transform: translate3d("+randomFromTo(-100,100)+"vw,"+randomFromTo(-100,100)+"vw,0vw); }");
      // assign the animation to our element (which will cause the animation to run)
      document.getElementById('onet').style.webkitAnimationName = anim;
  }
  
  // begin the new animation process
  function startChange()
  {
      // remove the old animation from our object
      document.getElementById('onet').style.webkitAnimationName = "none";
      // call the change method, which will update the keyframe animation
      setTimeout(function(){change("translate3d");}, 0);
  }
  
  // get a random number integer between two low/high extremes
  function randomFromTo(from, to){
     return Math.floor(Math.random() * (to - from + 1) + from);
  }
  </code></pre>
  
  <p>So finally, there is this part:</p>
  
  <pre><code>$(function() {
      $('#update-box').bind('click',function(e) {
          e.preventDefault();
          startChange();        
      });
  });
  </code></pre>
  
  <p>Which I'm not sure but I guess it's function is to trigger the function <code>startChange</code>.</p>
  
  <p>Now. In my case, I would like a function to auto trigger and, as the animation has to continue playing, it would have to loop indefinitely..</p>
  
  <p>Any ideas how to do that? I guess I could use <code>onAnimationEnd</code>.. But obviously I do not know how to write it...</p>