Make text move from right to left as a loop

Question

I'm trying to reproduce the comportment of the experience text by using css. I tried to use my basic knowledge in css but it's not working as expected. I don't know how to manege the fact that it's "turning around" and not going back and forth.

.animation {
    position: relative;
    animation: text 5s infinite;
}

@keyframes text {
    0% {
        right: 0px;
    }
    100% {
        left: 0px;
    }
    50% {
        left: 50%;
    }
}

<div>
  <div class="animation">Hello<div/>
</div>