js 随机选取动画_javascript – CSS随机动画

我的想法是制作一个图像,以便在他们飞走的时候分解成可以缩小的小部分.

我已经设法用几个CSS动画–scale translate3d-(结果不是很好,但它是一个开始).

现在,问题是我希望翻译是随机的.

据我所知,有一个简单的方法涉及JS / Jquery / GSAP,以及一个涉及SCSS / Sass的更复杂的方法……

我不熟悉所有这些.

我找到了一个使用javascript随机化旋转的代码,我已将其改编为我的翻译.

代码发布here作为答案.

// 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 ..但显然我不知道怎么写它…