JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "block"></div>
<div class = "moving"></div>

CSS

.block {
	width: 80px;
	height: 80px;
	position: absolute;
	top: 0px;
	left: 400px;
	background: black;
}
.moving	{
	width: 80px;
	height: 80px;
	position: absolute;
	top: 120px;
	left: -80px;
	background: grey;
animation-name: moving;
animation-duration: 8s;
animation-iteration-count: 10000;
animation-delay: 2s;
}
@keyframes moving {
	to {
		transform: translateX(700px);
		}
	100% {
		transform translateX(0);	
}
}

JavaScript

function Touch() {
      var staticBlock = document.querySelector('.block');
      var movingBlock = document.querySelector('.moving');

      setInterval(function () {
         var movingBlockRect = movingBlock.getBoundingClientRect();
         var staticBlockRect = staticBlock.getBoundingClientRect();

        if (movingBlockRect.x + movingBlockRect.width >= staticBlockRect.x) {
    		  staticBlock.style.background = "green";
        }
      }, 100);
}

Touch();