JSFiddle - React, Tailwind, and code Playground

HTML

<div class="apolightning" id="apol1"></div>
<div class="apolightning" id="apol2"></div>
<div class="apolightning" id="apol3"></div>

CSS

body {
    background: #000;
}

.apolightning {
    width: 100px;
    height: 235px;
    position: absolute;
    z-index: -1;
    left: 50%;
    margin-left: -14px;
    top: 0px;
    background: url(http://imapo.ru/img/apolight.png);
    display: none;
}
#apol2 {
    background: url(http://imapo.ru/img/apolight2.png);
}
#apol3 {
    background: url(http://imapo.ru/img/apolight3.png);
}

JavaScript

$(function() {
    setInterval('apostartlight()', getRandomInt(500, 1000));
});

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

function apostartlight() {
    $('div.apolightning').hide(0);
    $('div#apol' + getRandomInt(1, 3)).css('margin-left', getRandomInt(-400, 0) + 'px').show(0).fadeOut(1000);
};