JSFiddle - React, Tailwind, and code Playground

HTML

<div class="motion">
    <div class="frame"></div>
    <div class="frame"></div>
    <div class="frame"></div>
</div>
<a href="#play" id="play">play</a>

CSS

.motion {
    width: 200px;
    height: 100px;
    position: relative;
}
.frame {
    opacity: 0;
    width: 200px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: red;
}
.frame:nth-of-type(1){
    opacity: 1;
}
.frame:nth-of-type(2){
    z-index: -2;
    background: green;
}
.frame:nth-of-type(3){
    z-index: -3;
    background: blue;
}


.motion.play .frame {
	-webkit-animation-name: flash;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: linear;
}
	.frame:nth-of-type(2) {
		-webkit-animation-delay: 1s;
	}
	.frame:nth-of-type(3) {
		-webkit-animation-delay: 2s;
	}

	@-webkit-keyframes flash {
		0% {
			opacity: 1;
		}
        100% {
            opacity: 0;
        }
	}

JavaScript

$('#play').click(function(event){
    $('.motion').toggleClass('play');
});