CSS Animate text from left to right in div container with overflow hidden

Question

So i\'ve recently working on some private project, and since i am a huge CSS fan i want to do most of the animations in CSS rather than in JavaScript.

Today i wanted to

Answer 1

change your keyframe value in %

Try This

body{ 
    overflow: hidden;
}
p{
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
}

@-webkit-keyframes floatText{
  from {
    left: 00%;
  }

  to {
    /* left: auto; */
    left: 100%;
  }
}

hello text