Move text according to its length, in CSS animation - css

Question

I'm having trouble creating my simple animation.
My question is, how can I display all the text in the animation, without knowing in advance what its length is?
The question is also about the time of the animation, but it is less critical for me.
Example below
Thank you, and keep up the pleasant coding.
.frame {
height: 100%;
width: 100px;
overflow: hidden;
}
.content {
height: 100%;
width: 100px;
background: yellow;
white-space: nowrap;
animation: floatTextSide 10s infinite linear ;
}
#keyframes floatTextSide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
<div class="frame">
<div class="content">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dicta optio alias ab, quas commodi perspiciatis voluptas voluptatum sit deserunt, magni temporibus sint tempore, quod voluptatibus vel velit. Perspiciatis, ipsa*****************.</span>
</div>
</div>

Answer 1

simply remove the width from content and use inline-block instead Then add 100px into the translation:
.frame {
height: 100%;
width: 100px;
overflow: hidden;
}
.content {
height: 100%;
display: inline-block;
background: yellow;
white-space: nowrap;
animation: floatTextSide 10s infinite linear;
}
#keyframes floatTextSide {
100% {
transform: translateX(calc(100px - 100%));
}
}
<div class="frame">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dicta optio alias ab, quas commodi perspiciatis voluptas voluptatum sit deserunt, magni temporibus sint tempore, quod voluptatibus vel velit. Perspiciatis, ipsa*****************.
</div>
</div>

Answer 2

The content div can highlight the text, but if you move it then the highlighting moves. What is needed is for the content to keep the yellow background but for the span with the text to move.
There is a wrinkle:
enter link description here
Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.
So we put the animation on the span but give it inline-block status.
.frame {
height: 100%;
width: 100px;
width: auto;
overflow: hidden;
}
.content {
height: auto;
width: 100px;
background: yellow;
white-space: nowrap;
overflow: hidden;
}
.content span {
animation: floatTextSide 10s infinite linear ;
overflow: visible;
display: inline-block;
}
#keyframes floatTextSide {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
<div class="frame">
<div class="content">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non dicta optio alias ab, quas commodi perspiciatis voluptas voluptatum sit deserunt, magni temporibus sint tempore, quod voluptatibus vel velit. Perspiciatis, ipsa*****************.</span>
</div>
</div>