1 概要
2 シンプルなテキストのジャンプ
- 2.1 解説
- 2.2 表示結果
3 時間差で一文字ずつジャンプするテキストアニメーション
- 3.1 解説
- 3.2 表示結果
4 時間差で一文字ずつジャンプしY方向にも回転するテキストアニメーション
- 4.1 解説
- 4.2 表示結果

テキスト文字列がジャンプするアニメーションを表現する - CSS

CSSでテキスト文字列がジャンプするアニメーションを表現するコードを紹介します。

概要

テキストが表示される際にテキストがジャンプするアニメーションをCSSで表現します。 CSSのkeyframes とtranslateYの機能を利用して表現します。

シンプルなテキストのジャンプ

シンプルなテキストのジャンプアニメーションのコードです。

TextJump01.css

.JumpText {
  animation: jumpAnimation 0.4s ease-in;
}

@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

TextJump01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TextJump01.css" />
</head>
<body>
  <p class="JumpText">SampleText</p>
</body>
</html>

解説

ジャンプするアニメーションのクラスです。キーフレームと全体の再生時間、イージングの種類を指定しています。

.JumpText {
  animation: jumpAnimation 0.4s ease-in;
}

ジャンプするアニメーションのキーフレームを準備します。アニメーション全体の半分で一番高くジャンプし、そのあと元の位置に戻る動作です。位置の移動はtranslateYプロパティを利用します。

@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

HTMLではジャンプするテキストにJumpTextクラスを設定しています。

<body>
  <p class="JumpText">SampleText</p>
</body>

表示結果

上記のWebページを表示します。下図のページが表示されます。
ページ表示時にテキストがジャンプするアニメーションが確認できます。また、リロード時にもアニメーションが再生されます。

時間差で一文字ずつジャンプするテキストアニメーション

TextJump02.cssl

body {
font-size:24px;
}

.JumpText {
  display: inline-block;
  animation: jumpAnimation 0.4s ease-in;
}

@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

TextJump02.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TextJump02.css" />
</head>
<body>
  <div class="JumpText">T</div>
  <div class="JumpText" style="animation-delay: 0.2s;">E</div>
  <div class="JumpText" style="animation-delay: 0.4s;">S</div>
  <div class="JumpText" style="animation-delay: 0.6s;">T</div>
  だよ。
</body>
</html>

解説

CSS部分のコードは先ほどのデモと同じです。
今回文字部分をdivタグで1文字ずつ囲んでいるため、改行させないよう、JumpTextクラスにはdisplay: inline-block;の設定を追加します。 inline-blockの詳細についてはこちらの記事を参照してください。

1文字ずつジャンプさせるため、文字ごとにdibタグで囲みそれぞれの要素にanimation-delay プロパティを設定します。
最初の文字はディレクがないため、animation-delay プロパティは設定せず、次の文字以降は0.2秒ずつディレイの時間を大きくして設定します。このコードにより、先頭の文字から順番に1文字ずつジャンプするアニメーションの動作になります。

<body>
  <div class="JumpText">T</div>
  <div class="JumpText" style="animation-delay: 0.2s;">E</div>
  <div class="JumpText" style="animation-delay: 0.4s;">S</div>
  <div class="JumpText" style="animation-delay: 0.6s;">T</div>
  だよ。
</body>

表示結果

上記のWebページを表示します。下図のページが表示されます。

ページ表示時にテキストが１文字ずつジャンプするアニメーションが確認できます。また、リロード時にもアニメーションが再生されます。

時間差で一文字ずつジャンプしY方向にも回転するテキストアニメーション

先の例をさらに拡張し、Y方向にも回転するアニメーションにします。

TextJump03.css

body {
  font-size: 24px;
}

.JumpText {
  display: inline-block;
  animation: jumpAnimation 0.4s ease-in;
}

@keyframes jumpAnimation {
  0% {
    transform: translateY(0) rotateY(0);
  }

  50% {
    transform: translateY(-10px) rotateY(180deg);
  }

  100% {
    transform: translateY(0) rotateY(360deg);
  }
}

TextJump03.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TextJump03.css" />
</head>
<body>
  <div class="JumpText">T</div>
  <div class="JumpText" style="animation-delay: 0.2s;">E</div>
  <div class="JumpText" style="animation-delay: 0.4s;">S</div>
  <div class="JumpText" style="animation-delay: 0.6s;">T</div>
  だよ

</body>
</html>

解説

コードは先の例のコードとほぼ同じです。
違う部分はキーフレームの設定部分で、rotateYプロパティを追加しています。
アニメーション開始時点では回転は0度に設定し、アニメーションの半分で180度回転します。アニメーションの終了時には360度回転し、元の状態に戻ります。

@keyframes jumpAnimation {
  0% {
    transform: translateY(0) rotateY(0);
  }

  50% {
    transform: translateY(-10px) rotateY(180deg);
  }

  100% {
    transform: translateY(0) rotateY(360deg);
  }
}