html - 在关键帧 (CSS) 中混合 'left' 和 'right' 失败

Question

我有一个水平文本在多个 div 中的内容动画，其宽度根据用户输入而变化。 (注意:不使用 jquery，所以我没有用这个问题标记它)。有一个带有文本字符串的 div——这是一个“单元”。用户可以输入任意数量的文本字符串，我们将一个新的 div 添加到现有文本 div 的右端:

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

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

1) 当动画开始时 (0%)，任意长度的文本/div 内容的位置——我需要该内容的左边缘距页面左侧 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>

我发现，如果我在上面的关键帧中只使用“右”或只使用“左”，text-and-divs 内容将从左向右滚动。

但我无法仅使用 left 值(像素或 %，似乎无关紧要)或使用 正确的值。

如果我在上面的关键帧中同时使用left和right，那么任意长的内容就不会再移动了，它是固定的在适当的位置，就好像关键帧拒绝允许在其语法中混合 left 和 right 限定符并且仍然允许动画继续进行。但我没有看到任何说明这一点的内容。

如何设置任意长度的 text-and-divs 内容，以便:

1) 当动画开始时 (0%)，任意长度的 text/div 内容的位置——该内容的左边缘应距离页面左侧 2 个像素。

2)当动画结束(100%)时，任意长的text/div内容的右侧需要距离页面右侧20像素左右。

有没有办法用关键帧做到这一点？

Answer 1

为此，我不得不放弃使用关键帧动画，不幸的是，我自己使用 Javascript 实现了这一点。