JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="container">
		<div id="krug"></div>
		
	</div>
<input id = "vkl" type="button" value="Включить" onclick="clc();">

CSS

#container{
position:relative;
border: 1px solid #fff;
background-color: #ed7;
width:300px;
height:300px;
overflow:hidden;

}
#krug{
        background:url(http://www.rollogrady.org/media/wp-content/uploads/2008/11/mp3ico-150x150.gif) no-repeat ;
		background-size:contain;
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
		left:0;
		opacity: 1;
		border-radius: 50%;
     }

JavaScript

var rrr = "blabal";
 

  function infinityMove() {
	var div1= document.getElementById('krug');
     var left = parseInt(getComputedStyle(div1).left, 10);
	var width ;
	var opacity = 1,
        max2 = 300;                                          
		setTimeout(function timer()
		{
 
      left += (setWay(left,150,0)) ? 1 : -1 ;
	  
	  div1.style.left = left/2+ 'px';
	  div1.style.top = left/2+ 'px';
	  //alert(div1.style.left)
	  opacity = 1 - (left/150);
	  width = max2-2*left;
	    div1.style.opacity = opacity;
		div1.style.width = width + 'px';
		div1.style.height = width + 'px';
		
     rrr = setTimeout(timer, 10);
 
    }, 100);

  }
  
 
  var setWay = (function() {
 
    var ltr = true;
 
    return function(position,firstValue,lastValue) {
 
      if(position >= firstValue ) {
       ltr = false;
      }
      if(position <= lastValue) {
         ltr = true;
      }
 
      return ltr;
 
    }
  
  })();
 
 function clc()
 
	{	var z = document.getElementById ('vkl');
		
		var	d = (z.getAttribute('value') == 'Включить') ? false : true;
		if (!d)
		
			{infinityMove();
			z.setAttribute ("value","Выключить");
			}
			
		else
				{
				z.setAttribute ("value","Включить");
				clearTimeout(rrr);
				
				}
	}