Looking for a solution to create a horizontal text-in-several-divs animation with dynamic width based on user input. I am not using jquery for this particular implementation. The animation involves multiple div elements displaying text strings, each considered as a 'unit'. Users can input any number of text strings and we append a new div to the right end of the existing ones:
<div> TEXT1 </div>, <div> TEXT2 </div>, ...., <div> TEXT-N </div>
The technique used here is keyframe animation. Here's what needs to be achieved:
1) At the start of the animation (0%), the left edge of the text/divs content should be positioned 2 pixels from the left of the page.
2) At the end of the animation (100%), the right side of the text/div content should be approximately 20 pixels from the right of the page.
An attempted solution involved defining the following CSS properties:
<style>
.cssHorizontalAnimatedText
{
position:absolute;
animation:leftMovingTextStuff 10s infinite;
animation-timing-function: linear;
white-space: nowrap;
}
@keyframes leftMovingTextStuff
{
0% {
left:20px;
}
100%
{
right:-20px;
}
}
</style>
<div class="cssHorizontalAnimatedText" style='width:100%;overflow-x:hidden;height:41px;'>
<?php echo $theArbitrarilyLongDivsAndText ?>
</div>
However, the issue arises when attempting to use either only 'left' or 'right' values in the keyframes. It results in a left-to-right scrolling motion of the content. Using both 'left' and 'right' together prevents any movement completely. Is there a way to combine these positions effectively within the keyframes to achieve the desired outcome?
The goal is to have the long text-and-divs content set up such that:
1) At the start of the animation (0%), the left edge of the content should be 2 pixels from the left of the page.
2) At the end of the animation (100%), the right side of the content needs to be about 20 pixels from the right of the page.
Any suggestions on how to accomplish this effectively using keyframes?