时间戳

首页 > 解决方案 > 如何在没有 JavaScript 的情况下设置 CSS 动画速度？

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

问题描述

这个问题是关于 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 动画速度设置为相同，无论文本长度如何？

标签： htmlcsscss-animations

解决方案

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

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

  1. 相同的开始
  2. 同样的结局
  3. 相同的速度。

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

推荐阅读