如何使用 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)，与其溢出的截断量一样多。
但是，我找不到在 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>

Answer 2

这是另一个仅将变换用作动画的想法：

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

.marquee > span {
  display:block;
  animation: marquee 4s ease-in-out;
  transform: translateX(100%);
}
.marquee > * > span {
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  font-size: 2.5em;
  animation:inherit;
  transform: translateX(-100%);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
}

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

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

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