つぶやき

-ブログ-

ただテキストを表示させるだけではなく、テキストにアニメーションを使うと、ユーザーの印象にも残りやすくなります。今回は左から右に流れるテキストアニメーションをCSSアニメーションで実装する方法を解説します。

左から右に流れるテキストアニメーションを作成するコード

▢HTML

<div class="text_center">
        <div class="title">
            <div class="title_text">
                テキストが左から右に流れます。
            </div>
       　</div>
 </div>

▢CSS

.text_center {
  text-align: center;
  margin-top: 40px;
}

.text_center .title {
  display: inline-block;
}

.text_center .title .title_text {
  text-align: left;
  font-size: 40px;
  font-weight: bold;
  color: #ff6347;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  animation: title_text 3.0s forwards linear;
}

@-webkit-keyframes title_text {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes title_text {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

テキストアニメーションのHTML構造

まずは今回作成したテキストアニメーションのHTML構造から解説します。3つのHTML構造で作成していて、3つそれぞれの役割は下記のとおりです。

• text_center → テキストを真ん中に配置するための要素
• title → display:inline-blockを適用するための要素
• title_text → 左から右へのテキストアニメーションを作るための要素

なぜtitleにdisplay:inline-blockを適用させるかというと、アニメーションで使う文字列の幅の値をtitleの要素の幅の値と同じにしたいからです。テキスト部分だけにアニメーションを適用させたかったので、このような構造になっています。

次にtext_centerを用意した理由は、display:inline-blockが適用されている要素を中央配置にしたかったからです。display:inline-blockが適用されている要素は、親要素に text-align: center;が適用されていると中央配置されるようになります。

そしてtitle_textには、 text-align: left;が適用されています。これによって左から右に流れるアニメーションを適応できます。この部分をtext-align: center;にすると、左から右に流れなくなるので、このようなHTML構造になっています。

CSSアニメーションを適用する

では続いてCSSアニメーションを適用させていきます。

.text_center .title .title_text {
 white-space: nowrap;
 overflow: hidden;
 animation: title_text 3.0s forwards linear;
}

@keyframes title_text {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

white-space: nowrap;で改行を防ぎ、overflow: hidden;を適用させます。これで@keyframesのwidth: 0%;の際にテキストを隠すことができます。そして@keyframesの100%で、width: 100%;を適用すれば、時間と共に文字全体が左から右に流れて表示されるようになります。

これでテキストアニメーションの完成です。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。