如何在没有JavaScript的情况下设置CSS动画速度? [英] How to set CSS animation speed without JavaScript?

问题描述

这个问题与CSS动画的速度有关.

  .div1 {边距:10px;宽度:300像素；背景:#A1BDAF；空白:nowrap;溢出:隐藏；}.内容{白颜色;最小宽度:100％；显示:inline-block;动画:向前移动4s轻松进出；过渡:宽度线性；}@关键帧移动{从{-webkit-transform:translateX(0);转换:translateX(0);左边距:0；}至{-webkit-transform:translateX(-100％);转换:translateX(-100％);左边距:100％；}}  

 < div class ="div1">< h1 class ="content">现在唯一重要的是您对我的思念</h1></div>< div class ="div1">< h1 class ="content">我想修正文字动画的运行速度</h1></div>< div class ="div1">< h1 class ="content">无论文本的长度如何.</h1></div>< div class ="div1">< h1 class ="content">有没有办法设置持续时间而不是动画速度</h1></div>< div class ="div1">< h1 class ="content">没有JavaScript?</h1></div>  

如上所述，动画的持续时间是固定的，因此文本较短较短，进度较慢，反之亦然.但我想使动画速度相同.

在JavaScript中，它可以表示为

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

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

在没有JavaScript的情况下，如何将CSS动画速度设置为与文本长度相同?

解决方案

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

使用CSS(甚至JS)不可能一次拥有:

1. 同一起点
2. 同一端
3. 相同的速度.

您只能有2个.在您的解决方案中，您拥有(1)和(2)，在下面，您将拥有(2)和(3)

  .container {溢出:隐藏}.div1 {剪辑路径:多边形(0 0，300px 0，300px 100％，0 100％);溢出:隐藏；显示:inline-flex;空白:nowrap;flex-direction:列;}.内容 {白颜色;边距:5px 0;填充:0.5em 0;背景:#A1BDAF；职位:相对动画:向前移动6s轻松进出；左:0；}.content span {显示:inline-block;位置:粘性；左:0；}@keyframes移动{至 {左:calc(300px-100％);}}  

 < div class ="container">< div class ="div1">< h1 class ="content">< span>现在唯一重要的是您对我的所有想法</span></h1>< h1 class ="content">< span>我想确定运行文本动画</span>的速度.</h1>< h1 class ="content">< span></span>不管文本的长度如何.</h1>< h1 class ="content">< span>有没有办法设置持续时间而不是动画速度?</h1>< h1 class ="content">< span>没有JavaScript?</span></h1></div></div>  

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

  .container {溢出:隐藏}.div1 {剪切路径:多边形(calc(100％-300px)0，100％0，100％100％，calc(100％-300px)100％);显示:inline-flex;空白:nowrap;flex-direction:列;transform:translateX(calc(300px-100％));溢出:隐藏}.内容 {白颜色;边距:5px 0;填充:0.5em 0;背景:#A1BDAF；职位:相对动画:向前移动6s轻松进出；左:0；}.content span {位置:粘性；对:0;float:right;最小宽度:300像素；}@keyframes移动{从 {左:calc(100％-300px);}}  

 < div class ="container">< div class ="div1">< h1 class ="content">< span>现在唯一重要的是您对我的所有想法</span></h1>< h1 class ="content">< span>我想确定运行文本动画</span>的速度.</h1>< h1 class ="content">< span></span>不管文本的长度如何.</h1>< h1 class ="content">< span>有没有办法设置持续时间而不是动画速度?</h1>< h1 class ="content">< span>没有JavaScript?</span></h1></div></div>  

两种解决方案的主要技巧是使所有元素具有相同的宽度(由最长的元素定义).为此，我考虑了具有列方向的flexbox容器.这将确保速度相同，因为宽度相同，然后使用粘性I阻止内部元素到达边缘之一时移动.

This question is about speed of CSS animation.

.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>

As above, the duration of the animation is fixed, so the shorter the text is, the slower the progress, and vice versa. But I want to make the animation speed the same.

In JavaScript, It could be expressible as

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

but I want to write it in CSS without JavaScript.

How to set CSS animation speed the same regardless length of text without JavaScript?

解决方案

Here is an idea where you can consider the use of position:sticky but I will change how the animation should work.

Using CSS (or even JS) it's impossible to have at once:

1. the same start
2. the same end
3. the same speed.

You can only have 2 of them. In your solution you had the (1) and (2) and below you will have the (2) and (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>

And here you have (1) and (3). I know it's a crazy solution but be patient ...

.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>

The main trick in both solutions is to make all the elements the same width (defined by the longest one). To do this, I considered a flexbox container with a column direction. This will make sure the speed is the same since the width is the same then using sticky I block the inner element from moving when it reach one of the edges.

这篇关于如何在没有JavaScript的情况下设置CSS动画速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！