JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="main">
    <div class="box"></div>
</div>

CSS

div.box {
    width: 100px;
    height: 100px;
    background: red;
}
.main.a .box {
    animation: a 1s forwards;
}
.main.b .box {
    animation: b 1s forwards;
}
@keyframes a {
    100% {
        background: yellow;
    }
}
@keyframes b {
    100% {
        background: red;
    }
}

JavaScript

var a = 0;
$(document).on('click',function(){
	if(a === 0){
    	$('.main').removeClass('b');
        $('.main').addClass('a');
        a = 1;
    }else {
    	$('.main').removeClass('a');
        $('.main').addClass('b');
        a = 0;
    }
})