How to set CSS animation speed without JavaScript?

user_10607839 0
Viewed 499

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?

css-animations css html
2 Answers

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.

user_86203330 
transition: (action) sec;

OR

transition: all 1s;
user_124877220
Related