Text wrapping not animating smoothly-CodePudding

I'm using CSS to create animations for my website. When the home page loads, I want the my name and an image to slide in from the side, "my name" appearing from the left, and an image appearing from the right. My problem now is, if the screen is just small enough for "my name" to wrap, then when the animations begins it first doesn't wrap but when it ends the text wraps, leaving behind a sudden transition of the "my name". This video should explain it better

So my question is how can I make the overall animation smooth even if the text has to be wraped?

This is the following CSS animation that I'm using:

@keyframes slideToLeft {
  
  from {
    margin-left: 100%;
  }
  to {
      margin-left: 0%;
  }
}
@keyframes slideToRight {

  from {
    margin-left: -100%;
}
  to {
    margin-left: 0%;
  }
}

CodePudding user response：

For Simple Animation you need to use : Animate On Scroll Library.

Link for Example : AOS

CodePudding user response：

You have to give the text width (like 100vw) so that the text stay wrap when animation starts.