How to make this alternate scrolling text NOT to go beyond its parent element's width or sides?-CodePudding

I am trying to make the text scrolling back and forth alternatively within its parent container. However the text is scrolling but with one issue: text goes beyond its parent container's width or sides and then scrolls back. I want text to scroll left to right and right to left as soon as it touches its parents left and right borders.

Can anyone please help me to make some editing in my below code so that I can achieve my desired result:

.text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
}

.text_scroll_alt > p {
  width: max-content;
  padding-left: 100%;
  border: 1px solid red;
  animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
  to {transform: translateX(-100%);}
}

<div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CodePudding user response：

You can make < p > Absolute and give left position in keyframe to achieve this.

360px is the width of your element < p >

.text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  position:relative;
  min-height:50px
}

.text_scroll_alt > p {
   width: max-content;
   position:absolute;
   border: 1px solid red;
   animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
    from {left:0}
    to {left:calc(100% - 360px);}
}

<div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CodePudding user response：

Here is an example. Reference taken from https://www.quackit.com/css/codes/marquees/

 .example5 {
     height: 50px;
     overflow: hidden;
     position: relative;
}
 .example5 h3 {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     line-height: 50px;
     text-align: left;
    /* Apply animation to this element */
     -moz-animation: example5 5s linear infinite alternate;
     -webkit-animation: example5 5s linear infinite alternate;
     animation: example5 5s linear infinite alternate;
}
/* Move it (define the animation) */
 @-moz-keyframes example5 {
     0% {
         -moz-transform: translateX(70%);
    }
     100% {
         -moz-transform: translateX(0%);
    }
}
 @-webkit-keyframes example5 {
     0% {
         -webkit-transform: translateX(70%);
    }
     100% {
         -webkit-transform: translateX(0%);
    }
}
 @keyframes example5 {
     0% {
         -moz-transform: translateX(70%);
        /* Firefox bug fix */
         -webkit-transform: translateX(70%);
        /* Firefox bug fix */
         transform: translateX(70%);
    }
     100% {
         -moz-transform: translateX(0%);
        /* Firefox bug fix */
         -webkit-transform: translateX(0%);
        /* Firefox bug fix */
         transform: translateX(0%);
    }
}

<div class="example5">
  <h3>Bouncing text..</h3>
</div>