CSSのanimationプロパティを使って要素をバウンドさせるようなアニメーションを作成する方法を紹介します。今回は、文字に対してアニメーションを設定していきます。

アニメーションの作成

バウンドしているような動きをさせるには、要素を上下に移動させることで表現することができますので、「translateY()」を使います。「translateY()」は下方向に移動させる場合に指定する値です。

.bound {
  animation: bound .8s linear infinite;
}
@keyframes bound {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px) scaleY(0.5);
  }
}
ABCDE

また、1文字ずつバウンドさせたい場合には、spanタグなどで1文字ずつ囲ってあげればできます。その場合は、アニメーションの対象をspanに変更します。

.bound span {
  display: inline-block;
  animation: bound .8s linear infinite;
}

あとは、疑似クラスを使って、各span要素ごとにアニメーションのタイミングをずらして設定してあげれば完成です。

.bound span:nth-child(2) {
  animation-delay: 0.2s;
}
.bound span:nth-child(3) {
  animation-delay: 0.3s;
}
～文字数分だけ設定～
ABCDE

以上が、CSSを使ってバウンドアニメーションを作成する方法となります。

おすすめの記事