<svg width="282px" height="82px" viewBox="0 0 282 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group">
            <circle id="red" fill="#EE4747" cx="41" cy="41" r="41"></circle>
            <circle id="yellow" fill="#FFC848" cx="141" cy="41" r="41"></circle>
            <circle id="green" fill="#1EC4B4" cx="241" cy="41" r="41"></circle>
        </g>
    </g>
</svg>
:root {
	--animation-time: 2s; 
}

html, body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  background-color: #222;
  justify-content: center;
  align-items: center;
}

@keyframes flicker {
  0% {
    opacity: 0;
  } 100% {
    opacity: 1;
  }
}

#red {
  animation: flicker var(--animation-time) ease alternate infinite;
}
View Compiled
const time = Math.random() + .5; // I’m adding .5 here so the flicker isn’t too obnoxious

console.log(time);

const red = document.querySelector('#red');
red.style.setProperty('--animation-time', time +'s');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.