JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS animation</title>
<link rel="stylesheet" type="text/css" href="animationcss.css">
<script src="cssanimation.js"></script>

</head>

<body>
<div id="background">
<div id="blue"></div>
<div id="red"></div>
</div>
<button id="button1">right</button>
<button id="button2">left</button>
<button id="button3">play red</button>
<button id="button4">stop red</button>
</body>
</html>

CSS

#background	{
	background-color:#f3f3ff;
	width:240px;
	height:100px;
	border:medium;
	
	
}

#blue	{
	background-color:#aaaaff;
	width:50px;
	height:50px;
	position:absolute;
	margin-top:20px;
	margin-left: 20px;
	border:thin;
	border-color:#000;
	border-width:1px;

	}
	
	#red	{
		background-color:#ffaaaa;
		width:50px;
		height:50px;
		position:absolute;
		margin-left: 150px;
		margin-top:20px;
		border:thin;
		border-color:#000;
		border-width:1px;
	}
   .animate {
        -webkit-animation-name: example; /* Chrome, Safari, Opera */
        -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
        -webkit-animation-name: example;
        -webkit-animation-iteration-count: infinite;
    animation-name: example;
    animation-duration: 3s;
    animation-name: example;
    animation-iteration-count: infinite;
    }
	/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {right:450px; top:8px;}
    25%  {right:500px; top:8px;}
	50%		{right:550px; top:8px;}
	75%	{right:500px; top:8px;}
    100%   {right:450; top:8px;}

}

/* Standard syntax */
@keyframes example {
    0%   {right:450px; top:8px;}
    25%  {right:500px; top:8px;}
	50%		{right:550px; top:8px;}
	75%	{right:500px; top:8px;}
    100%   {right:450; top:8px;}

}

	
	#button1	{
		width: 40px;}
	#button2	{
		width: 40px;}
	#button3	{width: 40px;
	}
	#button4	{width: 40px;
	}
	
	
	
	.rotateright {
        -webkit-animation-name: rotateright1; /* Chrome, Safari, Opera */
        -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
	    animation-name: rotateright1;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
	
		/* Chrome, Safari, Opera */
@-webkit-keyframes rotateright1 {
    0%   {transform:rotate(0deg);
	}
    50%  {transform:rotate(60deg);}
	100%		{transform:rotate(120deg);}

}

/* Standard syntax */
@keyframes rotateright1 {
   0%   {transform:rotate(0deg);
	}
    50% ...

JavaScript

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.add('rotateright');
});

document.getElementById('button2').addEventListener('click', function() {
    document.getElementById('blue').classList.add('rotateleft');
});


document.getElementById('button3').addEventListener('click', function() {
    document.getElementById('red').classList.add('animate');
});

document.getElementById('button4').addEventListener('click', function() {
    document.getElementById('red').classList.remove('animate');
});

var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});
bluediv.addEventListener("webkitAnimationEnd", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});