CSSテキストアニメーション集｜ふわっと出る文字演出をコピペ
生徒見出しの文字をふわっと表示させたいんですが、JavaScriptが必要ですよね？難しそう…
ペン博士ううん、CSSだけでOKだよ！@keyframesとopacity・transformを組み合わせれば、コピペで文字がふわっと出る演出が作れる。今日は定番パターンを全部渡すね。
「サイトを開いたとき、タイトルがふわっと現れる演出にしたい」「文字が1文字ずつ順番に出てくるアニメーションを実装したい」——そう思ってCSSを調べ始めたものの、どのプロパティを組み合わせればいいか分からないと感じた経験はないでしょうか。
CSSのテキストアニメーションは、JavaScriptを使わなくても驚くほど多彩な表現が可能です。ただし「どのプロパティをどう組み合わせるか」というパターンを知らないと、思い通りの動きを作るのに時間がかかります。
この記事では、Webサイトで実際によく使われるCSSテキストアニメーションを10種類以上、すべてコピペできる完成コードとともに解説します。基本的なフェードイン表示から、1文字ずつ時間差で出現させる方法、グラデーション文字、ネオン発光効果まで幅広くカバーしています。
アクセシビリティ対応（prefers-reduced-motion）についても必ず触れているので、実案件でそのまま使える内容になっています。
- opacity + transform でふわっとフェードインさせる基本パターン
- @keyframes で下から・上から・横からスライドインさせる方法
- animation-delay を使った1文字ずつ時間差アニメーション（span分割）
- background-clip: text でグラデーション文字を作る手順
- text-shadow を重ねてネオン発光テキストを実装する方法
- prefers-reduced-motion でアニメーションを安全に制御する方法
目次
CSSテキストアニメーションの基本：opacity + transform
テキストアニメーションの中でもっとも汎用性が高いのが、opacity と transform を組み合わせたフェードインです。要素を最初は透明・少し下にずらした状態から始め、アニメーションで元の位置に戻しながら表示します。
opacity と transform はどちらもGPUで処理されるため、パフォーマンス的に優れています。will-change を必要以上に使わなくても、スムーズに動きます。
基本のフェードイン（下から出現）
/* 基本フェードイン：下から出現 */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
<p class="fade-in-up">ふわっと下から出現するテキスト</p>
animation: forwards を指定することで、アニメーション終了後も最終状態（opacity: 1）が維持されます。これを忘れると、アニメーション終了後に元の透明状態に戻ってしまうので注意してください。
上から・横からのバリエーション
/* 上から出現 */
.fade-in-down {
opacity: 0;
transform: translateY(-30px);
animation: fadeInDown 0.6s ease forwards;
}
@keyframes fadeInDown {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 左から出現 */
.fade-in-left {
opacity: 0;
transform: translateX(-40px);
animation: fadeInLeft 0.7s ease forwards;
}
@keyframes fadeInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
/* 右から出現 */
.fade-in-right {
opacity: 0;
transform: translateX(40px);
animation: fadeInRight 0.7s ease forwards;
}
@keyframes fadeInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
遅延指定で複数テキストを順番に表示
見出しとサブテキストを連続して表示したいときは、animation-delay を使います。
.hero-title {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
.hero-subtitle {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease 0.3s forwards; /* 0.3秒遅延 */
}
.hero-button {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease 0.6s forwards; /* 0.6秒遅延 */
}
<section class="hero">
<h1 class="hero-title">メインタイトル</h1>
<p class="hero-subtitle">サブテキストが少し遅れて登場します</p>
<a class="hero-button" href="#">さらに詳しく</a>
</section>
スケールアニメーションで文字を拡大表示
フェードインと組み合わせて transform: scale() を使うと、文字が「ぱっと広がる」ような演出を作れます。ロゴや大見出しに効果的です。
/* スケールアップで登場 */
.scale-in {
opacity: 0;
transform: scale(0.8);
animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes scaleIn {
to {
opacity: 1;
transform: scale(1);
}
}
/* スケールダウンで登場（大きい状態から縮む） */
.scale-in-large {
opacity: 0;
transform: scale(1.2);
animation: scaleInLarge 0.6s ease forwards;
}
@keyframes scaleInLarge {
to {
opacity: 1;
transform: scale(1);
}
}
cubic-bezier(0.34, 1.56, 0.64, 1) はいわゆる「バウンス」イージングで、終点をわずかに超えてから落ち着くため、生き生きとした動きになります。
1文字ずつ時間差で出現させる（animation-delay + span分割）
「文字が左から1文字ずつ順番に出てくる」演出は、テキストを1文字ごとにspanで囲み、それぞれにanimation-delayを設定することで実現できます。
HTMLを手動でspan分割する方法
.char-animation span {
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: charFadeIn 0.4s ease forwards;
}
/* nth-childで各文字に遅延を設定 */
.char-animation span:nth-child(1) { animation-delay: 0.05s; }
.char-animation span:nth-child(2) { animation-delay: 0.10s; }
.char-animation span:nth-child(3) { animation-delay: 0.15s; }
.char-animation span:nth-child(4) { animation-delay: 0.20s; }
.char-animation span:nth-child(5) { animation-delay: 0.25s; }
.char-animation span:nth-child(6) { animation-delay: 0.30s; }
.char-animation span:nth-child(7) { animation-delay: 0.35s; }
.char-animation span:nth-child(8) { animation-delay: 0.40s; }
.char-animation span:nth-child(9) { animation-delay: 0.45s; }
.char-animation span:nth-child(10) { animation-delay: 0.50s; }
@keyframes charFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
<h1 class="char-animation">
<span>W</span><span>i</span><span>t</span><span>h</span>
<span>C</span><span>o</span><span>d</span><span>e</span>
</h1>
JavaScriptで自動span分割する方法
文字数が多い場合や動的なテキストに対応するには、JavaScriptで自動分割するのが現実的です。
// テキストを1文字ずつspanに分割して遅延アニメーション
document.querySelectorAll('.js-char-split').forEach(el => {
const text = el.textContent;
el.innerHTML = text
.split('')
.map((char, i) => {
const delay = (i * 0.05).toFixed(2);
const display = char === ' ' ? ' ' : char;
return `<span style="animation-delay:${delay}s">${display}</span>`;
})
.join('');
});
.js-char-split span {
display: inline-block;
opacity: 0;
transform: translateY(15px);
animation: charFadeIn 0.4s ease forwards;
}
@keyframes charFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
<!-- クラスを付けるだけでOK -->
<h2 class="js-char-split">1文字ずつアニメーション</h2>
グラデーション文字をアニメーションさせる（background-clip: text）
background-clip: text と -webkit-text-fill-color: transparent を組み合わせると、テキスト部分にグラデーションを表示できます。さらにアニメーションと組み合わせることで、色が流れるように変化する演出が作れます。
基本のグラデーション文字
.gradient-text {
background: linear-gradient(90deg, #ff6b6b, #ffa500, #ffef00, #6bff6b, #6b9fff, #a855f7);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3rem;
font-weight: bold;
animation: gradientShift 3s linear infinite;
}
@keyframes gradientShift {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
<h1 class="gradient-text">カラフルなグラデーションテキスト</h1>
ブランドカラーを使った2色グラデーション
.brand-gradient-text {
background: linear-gradient(135deg, #d16176 0%, #a855f7 50%, #3b82f6 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: brandGradient 4s ease infinite;
}
@keyframes brandGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
background-clip: text は主要ブラウザでサポートされていますが、-webkit- プレフィックスも必ず書くようにしてください。プレフィックスなしだけでは一部の環境で表示されないことがあります。
ネオン発光テキスト（text-shadow の重ね技）
ネオンサイン風のグロー効果は、text-shadow を複数重ねて書くことで表現します。ブラーを大きくするほど光が広がったように見えます。
.neon-text {
color: #fff;
font-size: 2.5rem;
font-weight: bold;
letter-spacing: 0.1em;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ff0080,
0 0 40px #ff0080,
0 0 80px #ff0080;
animation: neonFlicker 2s infinite alternate;
}
@keyframes neonFlicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ff0080,
0 0 40px #ff0080,
0 0 80px #ff0080;
}
20%, 24%, 55% {
text-shadow: none;
}
}
/* 青いネオンバリエーション */
.neon-blue {
color: #e0f7ff;
text-shadow:
0 0 5px #e0f7ff,
0 0 10px #e0f7ff,
0 0 20px #00b4d8,
0 0 40px #00b4d8,
0 0 80px #0077b6;
animation: neonPulse 1.5s ease-in-out infinite alternate;
}
@keyframes neonPulse {
from {
text-shadow:
0 0 5px #e0f7ff,
0 0 10px #e0f7ff,
0 0 20px #00b4d8,
0 0 40px #00b4d8,
0 0 80px #0077b6;
}
to {
text-shadow:
0 0 2px #e0f7ff,
0 0 5px #e0f7ff,
0 0 10px #00b4d8,
0 0 20px #00b4d8,
0 0 40px #0077b6;
}
}
ネオン演出は背景が暗い場合に映えます。白背景ではほぼ効果が出ないので、dark テーマや濃色セクションに限定して使うのが無難です。
テキストをぼかしながら表示（blur filter）
filter: blur() とopacityを組み合わせると、靄の中から文字が現れるような幻想的な演出が作れます。
.blur-in {
opacity: 0;
filter: blur(10px);
animation: blurIn 1s ease forwards;
}
@keyframes blurIn {
to {
opacity: 1;
filter: blur(0);
}
}
/* 各文字に個別遅延 */
.blur-in-chars span {
display: inline-block;
opacity: 0;
filter: blur(8px);
animation: blurIn 0.6s ease forwards;
}
.blur-in-chars span:nth-child(1) { animation-delay: 0.1s; }
.blur-in-chars span:nth-child(2) { animation-delay: 0.2s; }
.blur-in-chars span:nth-child(3) { animation-delay: 0.3s; }
.blur-in-chars span:nth-child(4) { animation-delay: 0.4s; }
.blur-in-chars span:nth-child(5) { animation-delay: 0.5s; }
テキストのアンダーライン（下線）アニメーション
リンクやキャッチコピーにホバー時のアンダーラインアニメーションを付けるのも人気の実装です。
/* 左から右へ伸びるアンダーライン */
.underline-slide {
position: relative;
display: inline-block;
text-decoration: none;
color: inherit;
}
.underline-slide::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: currentColor;
transition: width 0.3s ease;
}
.underline-slide:hover::after {
width: 100%;
}
/* 中央から両端へ広がるアンダーライン */
.underline-center {
position: relative;
display: inline-block;
}
.underline-center::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: #d16176;
transition: width 0.3s ease, left 0.3s ease;
}
.underline-center:hover::after {
width: 100%;
left: 0;
}
よくある実装パターン比較
| 演出名 | 使用プロパティ | パフォーマンス | 適した場面 |
|---|---|---|---|
| フェードイン | opacity + transform | 高（GPU） | 汎用・ファーストビュー |
| 1文字ずつ出現 | animation-delay + span | 中（span数による） | タイトル・ロゴ |
| グラデーション文字 | background-clip: text | 中 | ヒーローセクション |
| ネオン発光 | text-shadow アニメ | 低（多重shadow） | ダークテーマ限定 |
| ブラーイン | filter: blur | 中〜低 | 演出重視のLP |
| アンダーラインスライド | ::after + width transition | 高 | ナビ・リンク |
prefers-reduced-motion でアクセシビリティ対応
前庭障害や乗り物酔いがしやすいユーザーにとって、激しいアニメーションは体調に影響することがあります。OSの「視差効果を減らす」設定を尊重するために、prefers-reduced-motion メディアクエリを必ず実装してください。
/* 全アニメーションを一括でリセット */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 個別に制御する場合 */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
.fade-in-up {
animation: none;
opacity: 1;
transform: none;
}
}
CSS @keyframesの使い方を理解した上でアニメーションを組むと、この制御もより柔軟に行えます。一括リセットは手軽ですが、一部の演出（ローディングスピナーなど）まで止まってしまうため、重要な要素には個別対応を推奨します。
スクロール連動アニメーション（Intersection Observer）
ページロード時だけでなく、スクロールして要素が画面に入ったタイミングでアニメーションを発火させたい場合は、Intersection Observer APIを使います。
/* 初期状態：非表示 */
.scroll-reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* JSでクラスが付いたら表示 */
.scroll-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
// Intersection Observerでスクロールアニメーション
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
// 一度表示したら監視を外す（再アニメーション不要の場合）
observer.unobserve(entry.target);
}
});
},
{
threshold: 0.1, // 10%見えたら発火
rootMargin: '0px 0px -50px 0px' // 少し早めに発火
}
);
document.querySelectorAll('.scroll-reveal').forEach(el => {
observer.observe(el);
});
transition を使っているため、@keyframes を別途書く必要がありません。CSSだけで状態を定義し、JavaScriptはクラスを付け外しするだけという役割分担がシンプルです。
よくある失敗と対処法
失敗1：アニメーション終了後に要素が消える
animation-fill-mode: forwards（または animation のショートハンドで forwards）を忘れると、アニメーション終了後に初期状態（opacity: 0）に戻ります。
/* NG：forwardsなし */
.bad-example {
animation: fadeInUp 0.6s ease;
}
/* OK：forwardsあり */
.good-example {
animation: fadeInUp 0.6s ease forwards;
}
失敗2：display: inline の要素に transform が効かない
span などのインライン要素に transform を使いたい場合は、display: inline-block または display: block に変更する必要があります。
/* NG：inline要素にtransformは効かない */
span.bad {
transform: translateY(20px); /* 無視される */
}
/* OK：inline-blockに変更 */
span.good {
display: inline-block;
transform: translateY(20px); /* 有効 */
}
失敗3：background-clip: text が効かない
-webkit-text-fill-color: transparent を忘れると、background-clipを設定してもテキストの色がそのまま表示されてグラデーションが見えません。また、color: transparent は -webkit-text-fill-color の代替にはならない環境もあるので、両方書くのが安全です。
/* 必ずセットで書く */
.gradient-text {
background: linear-gradient(90deg, #ff6b6b, #a855f7);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* フォールバック */
}
まとめ
この記事では、CSSだけで作れる文字のフェードイン・スライドイン・1文字ずつの表示など、テキストアニメーションの定番パターンを紹介しました。ポイントは①opacityとtransformをtransitionや@keyframesで動かす②animation-delayで表示タイミングをずらす③スクロール連動はIntersection Observerを使う、の3つです。コピペしたらdurationとdelayを微調整して、あなたのサイトのトーンに合わせてください。
よくある質問（FAQ）
CSSテキストアニメーションはSEOに悪影響がありますか？
CSSアニメーション自体はSEOに悪影響を与えません。ただし、アニメーション開始前にopacity: 0にしているテキストはクローラーに読まれますが、意図的な隠蔽とは見なされないため問題ありません。アニメーションによるページの描画パフォーマンス低下がCore Web Vitalsに影響する可能性はあるので、過度なアニメーションは避けましょう。
animation と transition の使い分けはどうすればいいですか？
transition はホバーなどのユーザー操作をトリガーに「A状態からB状態へ変化」させるときに使います。animation（@keyframes）はページロード時やスクロール時など、任意のタイミングで自動的に動かしたいときや、2状態以上の動きを作りたいときに使います。テキストの登場演出には animation、ホバー時のスタイル変化には transition が適しています。
1文字ずつアニメーションさせるとき、スペースが詰まってしまいます
spanをdisplay: inline-blockにすると、隣接するspan間に微細な空白が生じることがあります。対策として、親要素にfont-size: 0を設定してspan側でfont-sizeを指定する方法や、HTMLでspan同士の間に改行・スペースを入れない（タグを詰めて書く）方法があります。Flexboxを使って親をdisplay: flexにし、flex-wrapを設定する方法も有効です。
グラデーション文字がSafariで表示されません
background-clip: text を使う際、-webkit-background-clip: text と -webkit-text-fill-color: transparent の両方が必要です。また、テキストに対してoverflowが隠れていないか確認してください。親要素にoverflow: hiddenがある場合、background-sizeが大きいとグラデーションが切れることがあります。
アニメーションがガクつく・重くなります。どう改善しますか？
GPU合成レイヤーに乗せることで改善できます。transform と opacity は自動的にGPUで処理されますが、filter: blur() や複数のbox-shadow・text-shadowは負荷が高くなりがちです。will-change: transform を使うと対象要素をあらかじめ合成レイヤーに昇格できますが、多用するとメモリ消費が増えるため、実際に重いと感じた要素にのみ使いましょう。また、アニメーションさせる要素のtransform: translateZ(0)も効果的です。
あわせて読みたい関連記事
CSS・Webデザイン実装の総まとめ
CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。
AIスキルで、未来の自分をアップデート！
今なら完全無料でAIを学べる！
- 動画や実践で楽しく学べる：初心者でも安心のカリキュラム
- スマホ・PCどちらでもOK：好きな時間に学習できる
- 料金は一切ナシ：0円でAIスキルが身につく
目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。
会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！
