【问题标题】：CSS animation duration and speedCSS动画持续时间和速度
【发布时间】：2022-01-09 17:11:19
【问题描述】：

我有一些简单的滚动（选框）文本...

我想知道为什么无论我为“持续时间”使用什么值，文本总是在“完成滚动”之前消失？

我一直这么认为

-webkit-animation-duration: 20.0s;

将自动设置速度，使动画在 20 秒内完成。有错吗？

我已经尝试了许多现有的字幕库。理想情况下，我正在寻找可以处理各种长度的动态变化文本的东西。

【问题讨论】：

标签： css css-animations marquee

【解决方案1】：

用 css 和 javascript 选框

我注意到问题在于您为文本指定了固定宽度。

#Headlines{
    position: absolute;
    top: 5px;
    height: 30px;
    white-space: nowrap;
    /*width:622px; This causes the problem*/
    z-index:0;
    font-weight: bold;
    color:white;
    text-shadow: 3px 3px 3px #000000;
    font-size: 24px;
-webkit-animation-name: scroll;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 20.0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: linear;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial';
    height:768px;
    background-color:grey;
  width: 1024px;
    font-weight: bold;
}

#Headlines_bg{
    position: absolute;
    top:0px;
    left:0px;
    width: 622px;
    height: 40px;
    background:#FFFFFF;
    opacity:.3;
    z-index:-1;
    border: 1px solid rgba(0,0,0,1);
}

#Headlines_Container{
    position: absolute;
    top:0px;
    left:0px;
    width:622px;
    height: 40px;
    z-index:0;
    overflow:hidden;
}

#Headlines{
    position: absolute;
    top: 5px;
    height: 30px;
    white-space: nowrap;
    /*width:622px;*/
    z-index:0;
    font-weight: bold;
    color:white;
    text-shadow: 3px 3px 3px #000000;
    font-size: 24px;
  /*-webkit-transform:translateX(30%);*/
-webkit-animation-name: scroll;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 20.0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes scroll {
0% {-webkit-transform:translateX(38%);}
100% {-webkit-transform:translateX(-100%);}}

<div id="Headlines_bg"></div>
<div id="Headlines_Container">
<div id="Headlines">Pressure builds as COVID hospitalizations hit record highs in Ontario and New Brunswick+++Hamilton neighbourhood covered after plant malfunction sends 'beans raining down</div>
</div>

更新

实现选取框效果的一种更可控的方法是使用 javascript。观察下面的代码是响应式的。

function markesina() {
        b = document.getElementById("m");
        //console.log(b.offsetWidth);
        console.log(b.scrollWidth, b.offsetWidth);
        b.animate(
          [
            // keyframes
            { transform: `translateX(${b.offsetWidth}px)` },
            { transform: `translateX(-${b.scrollWidth}px)` },
          ],
          {
            // timing options
            duration: 20000,
            iterations: Infinity,
          }
        );
      }

      markesina();

      window.addEventListener("resize", markesina);

.marke {
        white-space: nowrap;
      }

<link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />


<div class="container">
      <div class="row justify-content-center">
        <div class="col-6 mt-5" style="overflow: hidden">
          <p id="m" class="marke">
            Pressure builds as COVID hospitalizations hit record highs
            in Ontario and New Brunswick+++Hamilton neighbourhood covered
            after plant malfunction sends 'beans raining down  
          </p>
        </div>
      </div>
    </div>

【讨论】：

谢谢！如果我删除该固定宽度，则在文本开始滚动之前会有很大的延迟。你知道这是为什么吗？
更新我用javascript添加的例子
搞定了！ jsfiddle.net/bm0ruj1o/1无论文字多少，速度永远是相对的！！非常感谢您的帮助！

【解决方案2】：

修改这一行

100% {
  -webkit-transform: translateX(-100%);
}

到

100% {
  -webkit-transform: translateX(-350%);
}

让左边的文字完全消失

【讨论】：

谢谢。我怎样才能使这个动态，以便它适用于所有大小的文本？

【解决方案3】：

试试这个，它可能会起作用并在完成后停止显示文本

animation-fill-mode: forwards; animation-iteration-count: 1;

【讨论】：