CSS случайная анимация

моя идея состоит в том, чтобы сделать изображение, чтобы расчленить на маленькие части, которые будут уменьшаться, пока они улетают.

мне удалось сделать это с помощью нескольких анимаций CSS -scale + translate3d-(результаты не велики, но это начало).

теперь проблема в том, что я хотел бы, чтобы переводы были случайными. Насколько я понял, есть простой способ с участием JS/Jquery/GSAP и немного более сложный способ с участием SCSS/Sass...

Я незнакомый со всеми.

Я нашел код, который использует javascript для рандомизации вращения, и я адаптировал его к своему переводу.

код был размещен здесь как ответ.

// 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 < ss.length; ++i) {

        // loop through all the rules
        for (var j = 0; j < 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 && 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);
}

Итак, наконец, есть эта часть:

$(function() {
    $('#update-box').bind('click',function(e) {
        e.preventDefault();
        startChange();        
    });
});

который я не уверен, но я думаю, что это функция, чтобы вызвать функцию startChange.

сейчас. В моем случае я хотел бы, чтобы функция автоматически запускала и, поскольку анимация должна продолжайте играть, это должно было бы петля бесконечно..

есть идеи, как это сделать? Думаю, я мог бы использовать onAnimationEnd.. Но, очевидно, я не знаю, как это написать...