Speed of CSS

How to set CSS animation speed 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>

Transition speed and order in CSS

Ok Please check this I have tried to accomplished according to your query. I have added few lines please check. position: absolute; top: 100%; in #stats

#stats-dropdown {

  position: absolute;

  top: 20px;

  left: 20px;

  font-size: larger;

  font-family: 'Courier', Arial, monospace;

  font-weight: bold;

  color: black;

  background-color: palevioletred;

  height: 40px;

  width: 20px;

}

#stats-title {

  background-color: teal;

  width: 350px;

  height: 40px;

  margin-left: 20px;

  display: flex;

  white-space: nowrap;

  overflow: auto;

}

#stats-title>span {

  margin: auto;

}

#stats-dropdown #stats-title {

  width: 0px;

  overflow: hidden;

  -webkit-transition: all 0.5s ease-in-out;

  -moz-transition: all 0.5s ease-in-out;

  -o-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

}

#stats-dropdown:hover #stats-title {

  height: 40px;

  width: 350px;

}

#stats {

  height: 200px;

  width: 350px;

  margin-left: 20px;

  background-color: tomato;

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

  text-align: center;

  height: 0px;

  overflow: hidden;

  position: absolute;

  top: 100%;

  -webkit-transition: all 0.5s ease-in-out;

  -moz-transition: all 0.5s ease-in-out;

  -o-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

  ;

}

#stats-dropdown:hover #stats {

  height: 250px;

  width: 350px;

}

<div id="stats-dropdown">

  <div id="stats-title"><span>Rendering statistics</span></div>

  <div id="stats">

    <div>Number of Instances : 50</div>

    <div>Number of Surfaces : 1200</div>

    <div>Number of Patches : 5000</div>

    <div>Number of Elements : 10000</div>

    <div>Number of Vertices : 30000</div>

    <div>Running time : 50 ms</div>

  </div>

</div>

constant animation speed CSS

I guess it is making an ease. If you give an option linear, which is the animation's timing function, that works with constant speed and no delay. Let's do this way:

#tableNews {

    overflow: hidden;

    margin-right: 5%;

    width:90%;

    position: relative;

    -webkit-animation: mymove 15s linear infinite; /* Chrome, Safari, Opera */

    animation: mymove 15s linear infinite;

}    

    /* Chrome, Safari, Opera */

@-webkit-keyframes mymove {

    from {top: 60px;}

    to {top: -200px;}

}

@keyframes mymove {

    from {top: 60px;}

    to {top: -200px;}

}

<div id="tableNews">Hi</div>

setTimeout(() => {

  document.querySelector('.box.one').classList.add('start');

  document.querySelector('.box.two').classList.add('start');

}, 0);

.box {

  --transition-width: 20;

  --transition-speed: .05;

  width: 0px;

  overflow: hidden;

  height: 20px;

  transition-property: width;

  transition-timing-function: linear;

  transition-duration: calc(var(--transition-width) * var(--transition-speed) * 1s);

  background: black;

}

.box.one.start {

  width: 20px;

}

.box.two.start {

  --transition-width: 100;

  width: 100px;

}

<div class="box one"></div>

<div class="box two"></div>