问关键帧(CSS)中的“左”和“右”混合失败

EN

我有一个横向文本在几个div内容动画，其宽度变化取决于用户的输入。(注意:不使用jquery，所以我没有用这个问题标记它)。有一个带有文本字符串的div --那是一个“单位”。用户可以输入任意数量的文本字符串，我们将一个新的div插入到现有文本div的右侧：

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

我在使用关键帧动画技术。我需要的是：

1)当动画开始时(0%)，任意长度的文本/divs内容的位置--我需要该内容的左侧边缘距页面左侧2个像素。

2)当动画结束时(100%)，我需要任意长的文本/div内容的右侧的侧距页面右侧约20个像素。

所以我试了一下：

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

我发现，如果我只在上面的关键帧中使用“右”或“左”，那么文本和divs内容将从左滚动到右。

但是，我不能只使用左值(像素或%，似乎并不重要)或仅使用右值(至少似乎不能)。

如果我在上面的关键帧中同时使用左和右，那么任意长的内容不再移动，它是固定的，就好像关键帧拒绝在其语法中允许左限定符和右限定符混合，并且仍然允许动画继续进行。但我没有看到任何陈述这件事的东西。

如何设置任意长度的文本和div内容，以便：

1)当动画开始时(0%)，任意长度的文本/divs内容的位置--该内容的左侧边缘应该是页面左侧的2个像素。

2)当动画结束时(100%)，任意长的文本/div内容的右侧侧需要从页面右侧约20像素。

有没有办法用关键帧来做这件事？