〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【サンプルあり】CSSテキストアニメーション で簡単な動きをつけ注目を集めよう!

本記事は、「テキストを動かしてユーザーの注目を集めたい…」と思いつつ

UIHACK
編集長
UIHACK 編集長

・どうしたらテキストに動きのあるアニメーションを実装したらいいのか分からない人
・非エンジニアだが、社内に詳しい人はいないのでコピペで済ましたい人
・CSSでアニメーションを実装したことが無いので0から勉強したい人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「基本的なテキストアニメーションの実装方法」を「後半」では「おしゃれ」や「一文字ずつ」や「フェードイン効果」など様々なアニメーション別に詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください!

CSSアニメーションでゆらゆらなテキストの実装方法を解説

悩める社員
悩める社員

あ、こんにちは…最近ウェブデザインに興味があって、CSSアニメーションで文字を揺らす方法が知りたくて。

UIHACK
編集長
UIHACK 編集長

それは素晴らしい興味だね!CSSアニメーションで文字を揺らす方法は、実際に試して楽しいことだよ。やり方を知りたいのかい?

悩める社員
悩める社員

うん、それが知りたくて。でも、難しいんじゃないかな?

UIHACK
編集長
UIHACK 編集長

大丈夫、そんなことないよ。ちょっとしたコツを覚えれば、簡単にできるよ。まず最初に、特別なコードを書いて、文字に揺れる動きを指示するんだ。

悩める社員
悩める社員

そうなんだ、でもコードって難しそう…

UIHACK
編集長
UIHACK 編集長

ちょっと待って、専門的なことは言わないから大丈夫。例えば、文字をゆっくり左右に揺らすために、文字を囲むコードに「@keyframes」って指示を書くんだ。それで、文字が動く方法を指示できるんだよ。

悩める社員
悩める社員

@keyframesって何?

UIHACK
編集長
UIHACK 編集長

それは、文字がどのように動くかを定義するための特別な指示だよ。文字を左右に揺れるように動かすために、動きを小さく変えるステップを作るんだ。

悩める社員
悩める社員

なるほど、でもそれをどうやって文字に使うの?

UIHACK
編集長
UIHACK 編集長

いい質問だね。その指示を、テキストを囲むコードに適用するんだ。だから、コードの中に「animation: 」って指示を書いて、先ほど作った動きの名前を指定すれば、文字が揺れるアニメーションが実現できるんだ。

悩める社員
悩める社員

それってどうやって学べるの?

UIHACK
編集長
UIHACK 編集長

僕が教えるよ( ̄^ ̄)ゞ 現役でエンジニアしてるから任して!

基本のゆらゆらアニメーションの作成

UIHACK
編集長
UIHACK 編集長

ウェブデザインにおいて、文字やテキストを動かすアニメーションは、注目を惹きつけ、直帰率を下げる手法だと私は考えています。その中でも、「ゆらゆら」なテキストアニメーションは、柔らかい動きで視線を引きつることが出来ます。

【実行結果】ゆらゆらアニメーションの作成

プチ解説

テキストがゆらゆらと左右に揺れるアニメーションが適用されます。

HTML

<div class="text">ゆらゆらなテキスト</div>
HTML

CSS

@keyframes sway {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

.text {
    animation: sway 2s infinite ease-in-out;
}
CSS
プチ解説

@keyframes sway: これは、アニメーションのキーフレーム(動きの節目)を定義するためのルールです。”sway” はアニメーションの名前です。

0%: アニメーションの最初の状態を指定します。この場合、テキストの位置を変化させずにそのままにします。

50%: アニメーションの途中の状態を指定します。この場合、テキストを左に少しだけ移動させます(-5px)。

100%: アニメーションの最後の状態を指定します。再びテキストの位置を変化させずにそのままにします。

animation: sway先ほど定義したアニメーション名を指定します。

2s: アニメーションの再生時間を2秒に指定します。

infiniteアニメーションを無限に繰り返すように設定します。

ease-in-outアニメーションのタイミング関数を指定します。テキストがゆっくり始まり、ゆっくり終わるような動きになります。

CSSアニメーション おしゃれでインスピレーション溢れるアイデア集

UIHACK
編集長
UIHACK 編集長

おしゃれなアニメーションを使えば、ユーザーエンゲージメントを高めるだけでなく、ウェブサイトやアプリケーションの印象を向上させることもできます。この記事では、おしゃれでインスピレーション溢れるCSSアニメーションのアイデアをいくつかご紹介します。

スライド

【実行結果】横からスライド

プチ解説

要素が左からスライドして現れるアニメーションが実現されます。

HTML

<div class="slide-in">スライドする要素</div>
HTML

CSS

.slide-in {
  font-size: 30px;
  font-weight: bold;
  animation: slideIn 1s ease-out;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
CSS
プチ解説

animation: slideIn 1s ease-out;: slideIn という名前のアニメーションを1秒間かけて適用します。アニメーションのタイミング関数には ease-out を使い、終わりに向かって少し遅くなる動きを持たせます。

0%: アニメーションの最初の状態を指定します。この場合、要素を左から100%分移動させて画面外に出し、透明度を0に設定します。これにより、要素がスライドアウトしながらフェードアウトする動きが実現されます

100%: アニメーションの最後の状態を指定します。この場合、要素を元の位置に戻し、画面内にスライドさせて透明度を1に設定します。これにより、要素がスライドインしながらフェードインする動きが実現されます。

テキストを蛍光ペン風にマークする方法

UIHACK
編集長
UIHACK 編集長

テキストを蛍光ペンでハイライトすることは、情報を引き立てる効果的な方法の一つです。

【実行結果】テキストを蛍光ペン風にマークする方法

プチ解説

この方法を使うと、蛍光ペンのハイライトだけが横からスライドするアニメーションを実現できます。

HTML

<p><span class="highlight_move">蛍光ペンでハイライトされたテキスト</span></p>
HTML

CSS

.highlight_move {
   background: linear-gradient(transparent 50%, #ff0 30%);
   animation: slideIn 1s ease-out;
   position: relative;
   display: inline-block;
}

@keyframes slideIn {
   0% {
      transform: translateX(-100%);
   }
   100% {
      transform: translateX(0);
   }
}
CSS
プチ解説

background: linear-gradient(transparent 50%, #ff0 30%);: テキストの背景に蛍光ペンのハイライトを作成するための線形グラデーションが設定されます。

animation: slideIn 1s ease-out;: .highlight_move クラスの要素に対して、slideIn アニメーションを1秒かけて適用し、終わりに向かって少し遅くなるように ease-out タイミング関数を使います。

@keyframes slideIn: スライドアニメーションのキーフレームを定義するためのルールです。

0%: アニメーションの最初の状態を指定します。テキストを画面左側から外にスライドさせます。

100%: アニメーションの最後の状態を指定します。テキストを元の位置に戻し、画面内にスライドさせます。

CSSアニメーション 一文字ずつアニメーションする方法

UIHACK
編集長
UIHACK 編集長

テキスト内の各文字が順番に徐々に表示されるアニメーションを実現できます。一文字ずつのアニメーションを実装して、表現を作り出してみましょう。

一部分の変更

【実行結果】一部分の変更

プチ解説

各文字を個別の要素としてマークアップし、それぞれにアニメーションを適用します。ここでは、各文字の透明度や位置を変化させることで、下から上に移動して表示されるアニメーションを実現します。

HTML

<div class="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</div>
HTML

CSS

.text {
    display: inline-block;
    overflow: hidden;
}

.text span {
    display: block;
    opacity: 0;
    transform: translateY(100%);
    animation: slideInFromBottom 0.5s forwards;
    animation-delay: 0.1s; /* 0.1秒ずつ遅延して表示 */
}

@keyframes slideInFromBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
CSS
プチ解説

.text: アニメーションを適用するテキスト全体を囲む要素です。各文字は 要素で囲まれています。

.text span: テキスト内の各文字に適用されるスタイルです。初めは透明度を0にし、下方向に移動させて隠しています。アニメーションを適用することで、透明度を上げて表示し、下から上に移動してアニメーション効果を実現します。

animation-delay: 各文字の表示を0.1秒ずつ遅延させることで、一文字ずつ順番に登場する効果を実現します。

跳ねるようなアニメーション

【実行結果】跳ねる

プチ解説

テキストが跳ねるようなアニメーションが実現されます。

HTML

<div class="text-bounce">Bounce</div>
HTML

CSS

.text-bounce {
    display: inline-block;
    font-size: 36px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
CSS
プチ解説

.text-bounce: 跳ねるアニメーションを適用するテキスト要素に対するスタイルです。

animation: bounce 1s infinite;: テキストにbounceという名前のアニメーションを1秒間かけて無限に適用します。

@keyframes bounce: 跳ねるアニメーションのキーフレームを定義するルールです。

0%, 100%: アニメーションの最初と最後の状態を指定します。テキストを初期位置に戻します。

50%: アニメーションの中間状態を指定します。テキストを上に移動して跳ねる効果を演出します。

フェードイン効果を駆使した洗練されたCSSアニメーションテクニック

UIHACK
編集長
UIHACK 編集長

フェードイン効果はコンテンツの魅力を引き出し、洗練された印象を与えます。

背景と文字の色を反転

【実行結果】背景と文字の色を反転

プチ解説

上記のコードで、背景と文字の色を反転するアニメーションを実装することができます。

HTML

<div class="animated-text">Hello</div>
HTML

CSS

.animated-text {
    display: inline-block;
    font-size: 24px;
    background-color: #333;
    color: #fff;
    padding: 10px;
    animation: invertColors 3s infinite;
}

@keyframes invertColors {
    0% {
        background-color: #333;
        color: #fff;
    }
    50% {
        background-color: #fff;
        color: #333;
    }
    100% {
        background-color: #333;
        color: #fff;
    }
}
CSS
プチ解説

.animated-text: 背景色と文字色を反転させるテキスト要素に対するスタイルです。

animation: invertColors 3s infinite;: invertColors という名前のアニメーションを3秒間かけて無限に適用します。

@keyframes invertColors: 背景色と文字色の反転アニメーションのキーフレームを定義するルールです。

アニメーションの各キーフレーム(0%、50%、100%)で、背景色と文字色を適切に切り替えます。

下に線を引く

【実行結果】下に線を引く

プチ解説

上記のサンプルコードは、テキストの下に線が遅延付きで表示されるアニメーションを実装することができます。

HTML

<div class="underlined-text">Animated Text</div>
HTML

CSS

.underlined-text {
  position: relative;
  display: inline-block;
  font-size: 24px;
}

.underlined-text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ff9;
  transform: scaleX(0);
  transform-origin: bottom left;
  animation: underlineDelay 0.5s 1 0.5s ease-in-out forwards; /* 遅延とアニメーションの設定 */
}

@keyframes underlineDelay {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
CSS
プチ解説

animation: underlineDelay 0.5s 1 0.5s ease-in-out forwards;: underlineDelay という名前のアニメーションを適用します。遅延を実現するために、開始までの遅延を0.5秒に設定しています。

@keyframes underlineDelay: アニメーションのキーフレームを定義するルールです。テキストの下線が遅延付きで表示されるように設定しています。

下からフェードイン

【実行結果】下からフェードイン

プチ解説

テキストを下からスライドしながら徐々に表示させるフェードインアニメーションは、ユーザーの注意を引きつけ、ウェブサイトの見栄えを向上させる効果的な方法です。

HTML

<div class="fade-in-text">Welcome to Our Website</div>
HTML

CSS

.fade-in-text {
  position: relative;
  font-size: 24px;
  opacity: 0; /* 初めは透明に設定 */
  transform: translateY(100%); /* 下からスライドするために位置を下に設定 */
  animation: fadeInFromBottom 1s forwards; /* フェードインアニメーションの設定 */
}

@keyframes fadeInFromBottom {
  to {
    opacity: 1; /* アニメーション終了時に完全に表示 */
    transform: translateY(0); /* アニメーション終了時の位置 */
  }
}
CSS
プチ解説

opacity: 0;: 要素を初めは透明に設定します。このため、テキストが最初は表示されません。

transform: translateY(100%);下からスライドするアニメーションを実現するために、要素の位置を下に移動させます。translateY() 関数はY軸方向への移動を指定します。

animation: fadeInFromBottom 1s forwards;: fadeInFromBottom という名前のアニメーションを1秒間かけて実行します。forwards パラメータはアニメーションが終了したときに最終状態を維持することを指定します。

@keyframes fadeInFromBottom ルールの定義

to: このキーフレームはアニメーションの最終状態を指定します。

opacity: 1;: アニメーションが終了すると、要素の透明度が完全に不透明になります。これにより、テキストが表示されます。

transform: translateY(0);: アニメーションが終了すると、要素の位置が元の位置に戻ります。これにより、テキストが下からスライドして表示される効果が生まれます。

CSSアニメーションジェネレーターを活用して、簡単にゆらゆらなテキストエフェクトを作成しよう!

UIHACK
編集長
UIHACK 編集長

プログラミングが得意でない方でも、CSSアニメーションジェネレーターを利用すれば簡単に魅力的なテキストエフェクトを作成することができます。

epic-spinners

pic-spinnersは、CSSでアニメーション化された20種類のスピナー(読み込み中の表示)を提供するコンポーネントライブラリです。

これは、Webデザインにおいて非常に役立つツールで、HTMLとCSSを使って実装されています。スピナーは、ウェブページがデータを読み込んでいるときに表示されるアニメーションです。epic-spinnersでは、さまざまな種類のスピナーが用意されており、それらはCSSで設計された美しいアニメーションが施されています。

Front-end Tools

簡単なアニメーションを作成するための便利なツールです。このツールを使うと、アニメーションのスタイル変化を滑らかに行うためのトランジション効果を設定できます。また、イージング(アニメーションの動き方)、時間、遅延時間などもカスタマイズできます。用意されているサンプルから選び、必要に応じて編集することもできます。

Animista

基本的なアニメーションから始まり、入ってくる(in)エフェクトや出ていく(out)エフェクト、文字テキストのアニメーション、背景のアニメーション、目立たせるための動きなど、さまざまなアニメーションが用意されています。これにより、ウェブページの見た目を魅力的かつ興味深いものにすることができます。

あなたにオススメの本

【4年連続、売上第1位!】
【全国の書店員がオススメする本(2019年度 CPU大賞)第1位!】

読者の圧倒的な支持!シリーズ35万部突破の大ヒット!
¥2,486 (2023/08/01 15:07時点 | Amazon調べ)

結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、CSSテキストアニメーション で簡単の動きを実装する方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • CSSアニメーションでゆらゆらなテキストの実装方法を解説
  • CSSアニメーション おしゃれでインスピレーション溢れるアイデア集
  • CSSアニメーション 一文字ずつアニメーションする方法
  • フェードイン効果を駆使した洗練されたCSSアニメーションテクニック
  • CSSアニメーションジェネレーターのおすすめ3選

もう一度、最初から「CSSアニメーションでゆらゆらなテキストの実装方法を解説」を読む↑

HTML・CSSでログイン画面を実装したい方は、ぜひ以下の記事もご覧ください。

HTMLで年と月を選択する入力欄を実装したい方は、ぜひ以下の記事もご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です