<div class="focus_container"> 
  <div class="focus--mask">
    <div class="focus--mask-inner">בואי, נתפקס על זה</div>
  </div>
</div>
<style>
:root {
    --focus_element_width: 279px;
    --focus_content: "בואי, נתפקס על זה";
}

@-webkit-keyframes mask-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--focus_element_width) - 50px));
  }
}
@keyframes mask-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--focus_element_width) - 50px));
  }
}
@-webkit-keyframes mask-inner-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(calc(var(--focus_element_width) - 50px) * -1));
  }
}
@keyframes mask-inner-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(calc(var(--focus_element_width) - 50px) * -1));
  }
}

.focus_container {
  position: relative;
  width: auto;
  direction: ltr;
  
}
.focus_container:before {
  content: var(--focus_content);
  filter: blur(3px);
}
.focus_container:after {
  content: "";
  position: absolute;
  width: 50px;
  height: calc(100% + 8px);
  top: -4px;
  left: 0;
  border-top: 2px solid;
  border-bottom: 2px solid;
  -webkit-animation: mask-move 1s linear infinite alternate;
  animation: mask-move 1s linear infinite alternate;
}
.focus--mask {
  overflow: hidden;
  position: absolute;
  width: 50px;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  -webkit-animation: mask-move 1s linear infinite alternate;
  animation: mask-move 1s linear infinite alternate;
}
.focus--mask-inner {
    width: calc(var(--focus_element_width) + 50px);
  -webkit-animation: mask-inner-move 1s linear infinite alternate;
          animation: mask-inner-move 1s linear infinite alternate;
}


</style>