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%;
  }
}