小さくバウンドする文字

NARUHODO

html

<p class="item_text">NARUHODO</p>

CSS

.item_text{
  animation: key1 .3s ease infinite alternate;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

See the Pen Bounce element CSS Animation by yochans (@yochans) on CodePen.

改行させずに部分的にバウンド

コメントを頂いたので、部分的に改行させる方法を追記しておきますー。

<p>部分的に<span class="item_text">バウンド</span>します<p>

CSS

.item_text{
  font-size:2rem;
  display:inline-block;
  animation: key1 .3s ease infinite alternate;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

See the Pen Bounce element CSS Animation by yochans (@yochans) on CodePen.