JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left"></div>
<div class="right"></div>
<div class="text">HELLO</div>

CSS

body {
  margin: 0;
  display: flex;
}

.left {
  width:200px;
  height:200px;
  background: green;
}

.right {
  width:200px;
  height:200px;
  background: url('https://www.illicoveto.com/wp-content/uploads/sacre-de-birmanie.jpg');
  background-size: 200px;
}

.text {
  color: white;
  position: absolute;
  left: 100px;
  top: 70px;
  font-size: 50px;
  animation-name: animation;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  mix-blend-mode: difference;
}

@keyframes animation {
    0%   {left: 100px;}
    50%   {left: 140px;}
    100%   {left: 100px;}
}