Question

这个问题与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";

但是我想在没有JavaScript的CSS中编写它。

在没有JavaScript的情况下，如何将CSS动画速度设置为相同的大小？

Answer 1

这里是您可以考虑使用position:sticky的想法，但我将更改动画的工作方式。

使用CSS（甚至JS）不可能一次拥有：

同一起点
同一端
相同的速度。

您只能有2个。在您的解决方案中，您拥有（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容器。这将确保速度相同，因为宽度相同，然后使用粘性I阻止内部元素到达边缘之一时移动。

Answer 2

transition: (action) sec;

OR

transition: all 1s;

如何在没有JavaScript的情况下设置CSS动画速度？

2 个答案: