Question

我有一个水平的text-in-some-divs内容动画，其宽度因用户输入而异。（注意：不使用jquery所以我没有用这个问题标记）。有一个div带有文本字符串 - 这是一个'单元'。用户可以输入任意数量的文本字符串，我们在现有文本div的右端添加一个新的div：

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

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

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

2）当动画结束（100％）时，我需要任意长的text / 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 和 right 限定符，并仍然允许动画继续。但我没有看到任何说明这一点。

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

1）当动画开始（0％）时，text / divs内容的位置任意长度 - 该内容的左边缘应该是距离页面左边2个像素。

2）当动画结束（100％）时，任意长的text / div内容的右侧需要距离页面右侧约20个像素。

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

Answer 1

不幸的是，我不得不放弃使用关键帧动画，而且我使用Javascript滚动自己。

混合＆＃39;离开＆＃39;并且＆＃39;对＆＃39;在关键帧（CSS）失败

1 个答案: