如何在不使用JavaScript的情况下设置CSS动画速度？

Question

如何在不使用JavaScript的情况下设置CSS动画速度？

3

这个问题涉及到CSS动画的速度。

.div1{
    margin: 10px;
    width: 300px;
    background: #A1BDAF;
    white-space: nowrap;
    overflow: hidden;
}

.content{
    color: white;
    min-width: 100%;
    display: inline-block;

    animation: moving 4s ease-in-out forwards;
    transition: width linear;
}

@keyframes moving{

    from{
        -webkit-transform: translateX(0);
        transform: translateX(0);
        margin-left: 0;
    }

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

}

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

    <div class = "div1">
        <h1 class = "content">
            I want to fix the speed of running text animation 
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            regardless of the length of the text.
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            Is there any way to set not duration but speed of animation
        </h1>
    </div>

    <div class = "div1">
        <h1 class = "content">
            with out JavaScript?
        </h1>
    </div>

与上面相同，动画的持续时间是固定的，因此文本越短，进度越慢，反之亦然。但我想让动画速度保持不变。

在JavaScript中，可以表达为：

sampleDom.style.animationDuration = (sampleDom.scrollWidth) / (speed) +"s";

但我希望用CSS而不是JavaScript编写它。

如何在没有JavaScript的情况下设置CSS动画速度，使其与文本长度无关？

- J4BEZ

3

CSS 无法知道你在这些元素中有多少文本。仅使用 CSS 无法做到这一点。 - CBroe

@CBroe 噢，非常令人难过的消息...代码移植后，我担心它会变得有点沉重，所以我尽可能地尝试编写CSS，但似乎很困难。感谢您留下友善的评论。 - J4BEZ

1

@CBroe 有些疯狂的想法是可以实现的 ;) - Temani Afif

2个回答

-2

transition: (action) sec;

或者

transition: all 1s;

- madi.wd

哦，非常抱歉，但是过渡似乎没有解决它。如果文本长度发生变化，则每个元素的动画长度应该不同（D = V * T），但是过渡似乎无法控制动画速度。谢谢您的回复，祝您有愉快的一天。 - J4BEZ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

这里有一个想法，您可以考虑使用position:sticky，但我会改变动画的工作方式。

使用CSS（甚至JS）不能同时实现以下三点：

相同的开始
相同的结束
相同的速度

您只能拥有其中两个。在您的解决方案中，您拥有了（1）和（2），而下面您将拥有（2）和（3）。

.container {
  overflow:hidden;
}
.div1 {
  clip-path: polygon(0 0, 300px 0, 300px 100%, 0 100%);
  overflow: hidden;
  display: inline-flex;
  white-space: nowrap;
  flex-direction: column;
}

.content {
  color: white;
  margin:5px 0;
  padding:0.5em 0;
  background: #A1BDAF;
  position: relative;
  animation: moving 6s ease-in-out forwards;
  left: 0;
}

.content span {
  display: inline-block;
  position: sticky;
  left: 0;
}

@keyframes moving {
  to {
    left: calc(300px - 100%);
  }
}

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

    <h1 class="content">
      <span>I want to fix the speed of running text animation </span>
    </h1>

    <h1 class="content">
      <span> regardless of the length of the text.</span>
    </h1>

    <h1 class="content">
      <span> Is there any way to set not duration but speed of animation</span>
    </h1>

    <h1 class="content">
      <span> with out JavaScript?</span>
    </h1>
  </div>
</div>

这里有(1)和(3)。我知道这是一个疯狂的解决方案，但请耐心等待...

.container {
  overflow:hidden;
}
.div1 {
  clip-path: polygon(calc(100% - 300px) 0, 100% 0, 100% 100%, calc(100% - 300px) 100%);
  display: inline-flex;
  white-space: nowrap;
  flex-direction: column;
  transform:translateX(calc(300px - 100%));
  overflow:hidden;
}

.content {
  color: white;
  margin:5px 0;
  padding:0.5em 0;
  background: #A1BDAF;
  position: relative;
  animation: moving 6s ease-in-out forwards;
  left: 0;
}

.content span {
  position: sticky;
  right:0;
  float:right;
  min-width:300px;
}

@keyframes moving {
  from {
    left: calc(100% - 300px);
  }
}

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

    <h1 class="content">
      <span>I want to fix the speed of running text animation </span>
    </h1>

    <h1 class="content">
      <span> regardless of the length of the text.</span>
    </h1>

    <h1 class="content">
      <span> Is there any way to set not duration but speed of animation</span>
    </h1>

    <h1 class="content">
      <span> with out JavaScript?</span>
    </h1>
  </div>
</div>

在这两种解决方案中的主要技巧是使所有元素具有相同的宽度（由最长的元素定义）。为了做到这一点，我考虑使用一个列方向的flexbox容器。这将确保速度相同，因为宽度相同，然后使用sticky属性阻止内部元素在到达边缘时移动。