javascript - 如何使用 CSS 创建运行文本(跑马灯)

Question

我在学习 CSS 动画时遇到了很大的困难。

我将制作一个“转换:翻译”动画，它显示溢出内容宽度的文本，如下图所示。
How it works?: (Youtube video link)

var div1 = document.getElementById("div1");
var cont = document.getElementById("content");
var inf = document.getElementById("inf");

inf.innerHTML = "<p> Does the text inside h1 cut off? : " + (cont.offsetWidth < cont.scrollWidth) +
  "<br><b>Length of text overflow</b>: " + (cont.offsetWidth - cont.scrollWidth) +
  "<br> h1 width: " + (cont.offsetWidth) + ", h1's text length: " + (cont.scrollWidth) + "</p>";


div1.style.backgroundColor = "#A13DAF";
cont.style.webkitAnimationName = "moving";
cont.style.animationName = "moving";

cont.style.animationDuration = "3s";
cont.style.webkitAnimationDuration = "3s";

cont.style.animationTimingFunction = "linear";
cont.style.webkitAnimationTimingFunction = "linear";

#div1 {
  margin: 10px;
  width: 300px;
  background: rgb(40, 40, 40);
  white-space: nowrap;
  overflow: hidden;
}

#content {
  color: white;
  width: 100%;
  /* animation-name: moving;
    animation-duration: 3s;
    animation-timing-function: linear;
    -webkit-animation-name: moving;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear; */
}

@keyframes moving {
  0% {
    transform: none;
    -webkit-transform: none;
  }
  65% {
    /*below code is pseudo code, It doesn't work,
          It is an explanation of the direction I want but.. I can't find way to ...ㅠㅠ*/
    transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    -webkit-transform: translate( calc(#content.scrollWidth - #content.offsetWidth), 0);
    /*below value is caculated value of fixed text length and content width,
          but if either of these changes, this code will not be available for my purpose.
          Is there any way to specific values of CSS elements?*/
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
  100% {
    transform: translate( -668px, 0);
    -webkit-transform: translate( -668px, 0);
  }
}

<div id="div1">
  <h1 id="content">
    The only thing that matters now is everything You think of me
  </h1>
</div>
<div id="inf"></div>

像上面的代码，
我想让文本在内容 (h1) 中向左移动，与导致其溢出的 chop 量一样多。
但是，我找不到在 CSS 中引用内容值的方法。

有没有什么方法可以在不使用 JavaScript 的情况下通过引用 CSS 中另一个元素的特定值来修改 CSS 值？

我尽量避免使用 Javascript 更改关键帧的方法，尽管它可能非常繁重。

非常感谢。

Answer 1

您可以同时为 transform 和 margin-left 设置动画，这样动画将恰好在文本末尾结束:

.marquee {
  position: relative;
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out forwards;
}

@keyframes marquee {
  from {transform: translateX(0);     margin-left: 0;}
  to   {transform: translateX(-100%); margin-left: 100%; }
}

<h1 class="marquee">
  <span>The only thing that matters now is everything You think of me</span>
</h1>

<p class="marquee">
  <span>Beware of short texts!</span>
</p>