<div class="jump">
            <p>文字を<span class="jump-text">ジャンプ</span>させる1</p>
        </div>

        <div class="jump">
            <p><span class="jump-text">文字を</span>ジャンプさせる2</p>
        </div>
.jump {
  padding: 10px;
  font-size: 20px;
}

.jump-text span {
  animation: pyon 0.3s linear;
  position: relative;
}

@keyframes pyon {
  0% {top: 0}
  50% {top:-17px}
  100%{top: 0}
}
randomCharactor('jump-text');

function randomCharactor(c) {

var randomChar = document.getElementsByClassName(c);

for (var i = 0; i < randomChar.length; i++) {

      //クロージャー
      (function(i) {

          //i 番目の要素、テキスト内容、文字列の長さを取得
          var randomCharI = randomChar[i];
          var randomCharIText = randomCharI.textContent;
          var randomCharLength = randomCharIText.length;

          //何番目の文字を跳ねさせるかをランダムで決める
          var Num = ~~(Math.random() * randomCharLength);

          //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
          var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
          randomCharI.innerHTML = newRandomChar;

          //アニメーションが終わったら再び関数を発火させる
          document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
              randomCharactor(c)
          }, false)
      })(i)
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.