JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 50px;
    border: 3px solid black;
    -webkit-animation: ani1 3s 0s 3;
}
@-webkit-keyframes ani1 {
    from { background: green; }
    50% { background: red; }
    to { background: green; }    
}
@-webkit-keyframes ani2 {
    from { width: 100px; }
    50% { width: 150px; }
    to { width: 100px; }    
}

JavaScript

var elem = document.querySelectorAll("div")[0],
    pfx = ["webkit", "moz", "MS", "o", ""];

function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}

PrefixedEvent(elem, "animationend", function() { switchAnims(elem) });

function switchAnims(element) {
    if(element.style.animationName = "ani1") {
        element.style.animationName = "ani2";
    } else {
        element.style.animationName = "ani1";
    }
}