javascript - Randomize CSS3 Animation Delay -

i use css3 create slideshow using ol.slideshow. works.

i want randomize order of images. use li:nth-child(x) {animation-delay: x;} show , hide images, useless randomize order of ol elements.

to create workaround, thought adding classes nth-child-1 nth-child-6 in random order li elements on load, not able create such snippet.

js fiddle demo (why animation not work inside jsfiddle?)

how randomize li elements:

$.fn.randomize = function(selector){    var $elems = selector ? $(this).find(selector) : $(this).children(),    $parents = $elems.parent();    $parents.each(function(){       $(this).children(selector).sort(function(){          return math.round(math.random()) - 0.5;       }).detach().appendto(this);    });    return this; }; $('ol.slideshow').randomize(); 

this come with. single sweep. no hardcoding of number of elements in slideshow , random class on each starting nth-child-1

var elems = $("ol.slideshow li"); //gives array of li  var len = elems.length, randomnum = 0, randomel, counter = 1;  //we keep removing elements randomly giving them class //till not left element  //this way won't have hard code "6" - number of slideshow elements while(len--) {    randomnum = parseint(math.random()*len, 10);    randomel = elems.splice(randomnum, 1);    $(randomel).addclass('nth-child-' + counter);    counter++; }