mixing 'left' and 'right' in keyframe (CSS) fails

Question

I have a horizontal text-in-several-divs content animation whose width varies depending on user input. (note: not using jquery so I did not tag that with this question). There is one div with a text string -- that's one 'unit'. The user can enter an arbitary number of text strings and we tack a new div onto the right end of the existing text divs:

 <div> TEXT1 </div>, <div> TEXT2 </div>, ...., <div> TEXT-N </div>

I'm using the keyframe animation technique. Here's what I need:

1) when the animation starts (0%), the position of the text/divs content of arbitrary length -- I need the left edge of that content to be 2 pixels from the left of the page.

2) when the animation ends (100%), I need the right side of the arbitrarily-long text/div content to be about 20 pixels from the right of the page.

So I tried this:

 <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>

I found that if I only use 'right' or only use 'left' in the keyframes above, the text-and-divs content will scroll left to right.

But I cannot get my desired positioning (at least it doesn't seem that I can) using left values (pixels or %, doesn't seem to matter) only, or using right values only.

If I use both left and right in the keyframes above, the arbitrarily-long content doesn't move anymore, it is fixed in position, as if the keyframes refuses to allow mixing left and right qualifiers in its syntax and still allow the animation to proceed. But I've seen nothing that states this.

How can I get my arbitrarily-long text-and-divs content set up so that:

1) when the animation starts (0%), the position of the text/divs content of arbitrary length -- the left edge of that content should be 2 pixels from the left of the page.

2) when the animation ends (100%), the right side of the arbitrarily-long text/div content needs to be about 20 pixels from the right of the page.

Is there a way to do this with the keyframe?

Answer 1

I had to abandon use of keyframes animation for this, unfortunately, and I rolled-my-own using Javascript.