如何使用纯CSS translateX 元素与其自身宽度成比例，而不是其父元素或屏幕宽度

Question

我正在努力使 this pure CSS text scroll tutorial 适应我的项目。我发现当滚动元素宽度长于其容器宽度时它不起作用。当元素仍然可见时，它会过早停止滚动。

我稍微检查了一下并设法找出问题所在，但我很难解决它，因为我对 CSS 了解不多。它不起作用的原因是最终的 translateX(-100%) 将文本移动容器大小的 100%，而不是滚动元素的大小。这会导致动画在文本仍然可见时重置。

请看一下我在下面准备的片段

.container {
  width: 200px;
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;
}
.content {
  transformBox: content-box;
  MozTransform: translateX(-100%);
  WebkitTransform: translateX(-100%);
  transform: translateX(-100%);
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <div class="content">
                now this is just some crazy long text, much wider than its parent container
            </div>
        </div>
    </body>
</html>

预期结果是：文本应该不可见，因为它应该完全移到屏幕左侧 transformX(-100%)。

我想如果有人找到如何 transformX(-100%) 按元素宽度，那将解决滚动条的问题。我稍微研究了一下，发现 transform-box 属性表示 CSS transform 函数的引用元素。我确实尝试了所有可能的值，但它没有做出任何改变，现在我没有想法了。

Answer 1

它在我身边工作

.container {
  width: 200px;
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;
}
.content {
width:fit-content;
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <div class="content">
                now this is just some crazy long text, much wider than its parent container
            </div>
        </div>
    </body>
</html>

Answer 2

您需要使用 width 进入内容规则 width: fit-content;

.container {
  width: 200px;
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
  white-space: nowrap;
}

.content {  
  /* animation properties */  
  width:fit-content;
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="container">
            <div class="content">
                now this is just some crazy long text, much wider than its parent container
            </div>
        </div>
    </body>
</html>

fit-content(<length-percentage>)

使用 fit-content 公式，可用 space 替换为指定参数，即 min(max-content, max(min-content, ))

参考：

width

如何使用纯CSS translateX 元素与其自身宽度成比例，而不是其父元素或屏幕宽度

How to translateX an element proportionally to its own width and not its parent or screen width with pure CSS

html

css

css-transforms