Set Random Color to each of the multiple divs with the same class in (S)CSS

Question

I was wondering if I could give multiple divs with the same class name each a unique random colour which then changes every few seconds.

I've been able to do this is javascript but since this will be used on mobile I fear it will be too slow and thus want to use CSS animations. I've experimented with a few things (below) but I haven't figured it out.

Here is the version working with javascript, I want to achieve a similar effect: https://codepen.io/TechTime/pen/ZKdxQK with this javascript:

function randOrd() {
  return Math.round(Math.random()) - 0.5;
}

$(document).ready(function() {
  var klasses = [
    "animated zoomInLeft",
    "animated swing",
    "animated pulse",
    "animated bounceInLeft",
    "animated tada"
  ];
  klasses.sort(randOrd);
  $("#wrapper #box").each(function(i, val) {
    $(this).addClass(klasses[i]);
  });
});

var colorizer = function ( el, min, max ) {

    // @link https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript
    function getHexColor() {
      return "#000000".replace( /0/g, function () {
        return ( ~~( Math.random() * 16 ) ).toString( 16 );
      } );
    }

    // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

    function getRandomInt( min, max ) {
      return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
    }

    min = undefined == min ? 250 : min;
    max = undefined == max ? 1500 : max;

    var isDefaultColor = true,
        style          = el.style,
        defaultColor   = style.borderBottomColor,
        color;

    return function ( e ) {

      el.offsetWidth; // Reset transition so it can run again.

      color                    = isDefaultColor ? getHexColor() : defaultColor;
      isDefaultColor           = !isDefaultColor;
      style.borderBottomColor  = color;
      style.transitionDuration = ( getRandomInt( min, max ) ) + 'ms';

    };

  },
  colorizeAll = function ( els, min, max ) {

    var arr = [].slice.call( els ); // To Array from NodeList.

    arr = arr.map( function( el ) {

        var colorized = colorizer( el, min, max );

      el.addEventListener( 'transitionend', colorized );

      return colorized;

    } );

    return function () {
        arr.map( function ( colorized ) {
            colorized();
      } );
    };

  },
  tris = document.querySelectorAll( '.triangle-up > div' ),
  all  = colorizeAll( tris, 750, 2000 );

// Kick it off!
all();




var colorizer2 = function ( el2, min2, max2 ) {

    // @link https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript
    function getHexColor2() {
      return "#000000".replace( /0/g, function () {
        return ( ~~( Math.random() * 16 ) ).toString( 16 );
      } );
    }

    // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
    function getRandomInt2( min2, max2 ) {
      return Math.floor( Math.random() * ( max2 - min2 + 1 ) ) + min2;
    }

    min2 = undefined == min2 ? 150 : min2;
    max2 = undefined == max2 ? 5500 : max2;

    var isDefaultColor2 = true,
        style2          = el2.style,
        defaultColor2   = style2.borderTopColor,
        color;

    return function ( e ) {

      el2.offsetWidth; // Reset transition so it can run again.

      color                    = isDefaultColor2 ? getHexColor2() : defaultColor2;
      isDefaultColor2           = !isDefaultColor2;
      style2.borderTopColor  = color;
      style2.transitionDuration = ( getRandomInt2( min2, max2 ) ) + 'ms';

    };

  },
  colorizeAll2 = function ( els, min, max ) {

    var arr = [].slice.call( els ); // To Array from NodeList.

    arr = arr.map( function( el ) {

        var colorized2 = colorizer2( el, min, max );

      el.addEventListener( 'transitionend', colorized2 );

      return colorized2;

    } );

    return function () {
        arr.map( function ( colorized2 ) {
            colorized2();
      } );
    };

  },
  tris2 = document.querySelectorAll( '.triangle-down > div' ),
  all2  = colorizeAll2( tris2, 750, 2000 );

// Kick it off!
all2();


if (
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
) {
 //add stuff
  $("#zewrapper").css("max-height", "700px");
}

Experiments (failed): https://jsfiddle.net/rc3a9zgv/ uses this scss:

body {
  background-color: #FFF;
  background: #bfbfbf;
  overflow-x: hidden;
  --random-colors: 2;

}
:root {
  --random-colors: 2;
}
@mixin random-color($selector) {
  #{$selector}: unquote("rgba(#{var(--random-colors)}, #{--random-colors}, #{--random-colors}, #{random(100)/100})");
}