How to pause text movement?

Question

css

How to make text jump every 5 or 7 seconds?
It is not clear where such a value can be set there.

<div id="jumping" style="font-weight: bold; font-size: 40px; color: bleack;"></div>

<script type="text/javascript">
message = "MoneyForum";
ns6_switch = 1;
var ns6 = document.getElementById&&!document.all;
var mess = new Array( -1, -5, -9, -13, -9, -5, -1);
var num = 0;
var scope = 0;
var text = "";

function start_jumping() {
if (ns6&&!ns6_switch) {
 jumping_text.innerHTML = message;
 return;
}
for (n=0; n != message.length; n++) {
 text += "<span style='position: relative;' id='id_" + n + "'>" +
 message.charAt(n) + "</span>"
}
jumping_text.innerHTML = text;
text = "";
move_left();
}

function move_left() {
first_symbol = document.getElementById("id_0");
first_symbol.style.left = -scope + "px";
if (scope != 12) {
 scope += 4;
 setTimeout("move_left();", 50);
}
else move_right();
}

function move_right() {
first_symbol.style.left = -scope + "px";
if (scope != 0) {
 scope -= 4;
 setTimeout("move_right();", 50);
}
else wave();
}

function wave() {
text = "";
for (n=0; n != message.length; n++) {
 if (n+num > -1 && n+num < 7) {
  text += "<span style='position: relative; top: " + mess[n+num] + "px'>" +
  message.charAt(n) + "</span>"
 }
 else text += "<span>" + message.charAt(n) + "</span>";
}
jumping_text.innerHTML = text;
text = "";
if (num != (-message.length)) {
 num--;
 setTimeout("wave();", 50);
}
else {
 num = 0;
 setTimeout("start_jumping();", 50);
}
}
</script>

<script type="text/javascript">
jumping_text = document.getElementById("jumping");
start_jumping();
</script>

Answer 1

<div class="wrapper">
  <div class="inner">
  <div class="block-title">
    <p>
      наши партнеры
    </p>
  </div>
  <ul class="partners-list">
    <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
     <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
     <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
  </ul>
  </div>
</div>

.wrapper {
    background-color: #fff;
    border-radius:10px;
    padding:20px;
    position: relative;
    max-width: 500px;
    clear: both;
    overflow: hidden;
}
.inner {
  position: relative;
  border:1px solid green;
  padding: 15px;
}
.block-title {
 position: relative;
 top:-25px;
 text-align: center;
}
.block-title p {
  color:green;
  text-transform: uppercase;
  display: inline;
  margin: 0 auto;
  background-color: white;
  padding: 10px;
}
.partners-list {
  width: 100%;
  position: relative;
  list-style-type: none;
  font-size:0;
  padding: 0;
  margin: 0;
}
.partners-list-item {
  display: inline-block;
  text-align: center;
  width: 15%;
  margin-right: 2%;
  min-height: 100px;
  background-color: red;
}
.partners-list-item:last-of-type{
  margin-right: 0;
}

Answer 2

display: inline-block vertical-align: middle is not suitable?

Answer 3

<div class="slider">
<h2 class="slider__title"><span class="slider__title-text">Наши партнеры</span></h2>
</div>

Wrap slider with border: 1px solid #000.
Inside there will be a heading with position: absolute; text-align: center; top: -10px;
The text has background: #fff;
The title will appear on top of the stroke.
Something like that)