make elements shine at variable times

Question

I've created a CSS animation which animates a 'shine' effect on all the elements with the specified class.

The shine itself works perfect, however, due to them all shining at the same time, it looks fairly unnatural.

I've been brainstorming different ways to variate the shine times for each element - but I can't seem to wrap my head around it, and none of the things I've tried are either efficient, or just don't work altogether.

    .loading-element{
        position: relative;
        background: #e0e0e0;
    }
    .loading-element::after{ /* this is the animated pseudo-element */
    	content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,
        			rgba(255,255,255,0.8) 50%,
        			rgba(247,247,247,0) 99%,
        			rgba(247,247,247,0) 100%);
        transform: translateX(100%);
        animation: shine 1s infinite 3s;
    }
    .index-load_track-item{
        width: 426px;
        height: 117px;
        margin: 30px 0;
    }
    .index-load-track_outer-artwork, .index-load-track_outer-waveform{
    	float: left;
    }
    .index-load-track_outer-artwork{
        width: 117px;
        height: 117px;
        margin-right: 9px;
    }
    .index-load-track_outer-artwork .loading-element{
    	width: 100%;
    	height: 100%;
    }
    .index-load-track_outer-waveform{
        width: 300px;
        height: 60px;
    }
    .index-load-track_outer-waveform .loading-element{
    	width: 100%;
    	height: 100%;
    }
    
    /* animation */
    @keyframes shine{
    	0%{ transform:translateX(-100%); }
    	100%{ transform:translateX(100%); }
    }

    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    		<div class="loading-element"></div>
    	</div>
    	<div class="index-load-track_outer-waveform">
    		<div class="loading-element"></div>
    	</div>
    </div>
    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    		<div class="loading-element"></div>
    	</div>
    	<div class="index-load-track_outer-waveform">
    		<div class="loading-element"></div>
    	</div>
    </div>

Answer 1

If you can use some jQuery, I'll suggest you to do something like this:
(I added some CSS code with comments to avoid unwanted behaviour)

// On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "animation-delay": (-10 * Math.random()) + "s",
    "animation-duration": (1 + 2 * Math.random()) + "s"
  });
});

.loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to avoid the shine being outside
  and the scroll bars to appear as in your snippet */
  overflow: hidden;
}

.loading-element::after {
  /* this is the animated pseudo-element */
  content: "";
  position: absolute;
  top: 0;
  filter: blur(5px); /* Added, just to try with it */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(247, 247, 247, 0) 99%, rgba(247, 247, 247, 0) 100%);
  transform: translateX(100%);
  /* animation: shine 1s infinite 3s; 
  now decomposed as below: */
  animation-name: shine;
  animation-duration: inherit;
  animation-iteration-count: infinite;
  animation-delay: inherit;
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

.index-load-track_outer-artwork {
  width: 117px;
  height: 117px;
  margin-right: 9px;
}

.index-load-track_outer-artwork .loading-element {
  width: 100%;
  height: 100%;
}

.index-load-track_outer-waveform {
  width: 300px;
  height: 60px;
}

.index-load-track_outer-waveform .loading-element {
  width: 100%;
  height: 100%;
}


/* animation */

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

⋅ ⋅ ⋅

This can also be done using CSS variables!
If you can use it, it's a better and easier way to do it, in my humble opinion.

// On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "--shine-delay": (-10 * Math.random()) + "s",
    "--shine-duration": (1 + 2 * Math.random()) + "s"
  });
});

.loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to avoid the shine being outside
  and the scroll bars to appear as in your snippet */
  overflow: hidden;
}

.loading-element::after {
  /* this is the animated pseudo-element */
  content: "";
  position: absolute;
  /* top and bottom modified so that blur doesn't add empty bars */
  top: -10px;
  bottom: -10px;
  filter: blur(8px); /* Added, just to try with it */
  width: 100%;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 10%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.0) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  transform: translateX(100%);
  animation: shine var(--shine-duration) infinite var(--shine-delay); /* <3 */
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

.index-load-track_outer-artwork {
  width: 117px;
  height: 117px;
  margin-right: 9px;
}

.index-load-track_outer-artwork .loading-element {
  width: 100%;
  height: 100%;
}

.index-load-track_outer-waveform {
  width: 300px;
  height: 60px;
}

.index-load-track_outer-waveform .loading-element {
  width: 100%;
  height: 100%;
}


/* animation */

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

I hope it helps.