Animation with VW & VH

HTML

<div><span class="t">10%</span>
<p class="a">test
</p>
<span class="n">90%</span>
</div>

CSS

div{
  width: 100%;
  background: blue;
  position: relative;
}
span{
  color: white;
  position: absolute;
  top: 0;
  display:block;
  height:100%;
  border-left:1px solid white;
}
.t{
  left: 10vw;
}
.n{
  left: 90vw;
}
.a{
  display: inline-block;
  border: 1px solid white;
  width: 50vw;
  animation: cloudanimation 2s linear infinite;
  color: white
}


@keyframes cloudanimation {
  0% {
    transform: translateX(50vw);
  }

  100% {
    transform: translateX(90vw);
    /* percentages don't work correctly with translate */
    /* transform : translateX(90%);*/
  }
}