JSFiddle - React, Tailwind, and code Playground

by tikosar

HTML

<div id="background">
<div id="blue"></div>
<div id="red"></div>
</div>
<button id="startAnim" onClick=""> ▶ </button>
<button id="button2"> < </button>
<button id="button3"> > </button>
<button id="stopAnim"> ■ </button>

CSS

@charset "UTF-8";
/* CSS Document */

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

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

	}
	
	#red	{
		background-color:red;
		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: 4s; /* Chrome, Safari, Opera */
        -webkit-animation-name: example;
        -webkit-animation-iteration-count: infinite;
    }
	/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {right:315px; top:8px;}
    50%  {right:430px; top:8px;}
    100%   {right:315px; top:8px;}

}

/* Standard syntax */
@keyframes example {
     0%   { right:315px; top:8px;}
    50%  { right:430px; top:8px;}
    100%   { right:315px; top:8px;}

}
	
	#button1	{
		width: 40px;}
	#button2	{
		width: 40px;}
	#button3	{width: 40px;
	}
	#button4	{width: 40px;
	}

JavaScript

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

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