『CSSで作る簡単なテキストアニメーション10選（コードあり）』を作ってみた！

エンジニアの金山（@spicato_kana）です！

今回は、タイトルの通り簡単なテキストアニメーションを紹介します。
元々は個人のストレス発散のために作っていたのですが、どうせならブログにして公開しようと思いまとめてみました。
CodePen を用いて実際の画面とコードを見ながらちょっとした解説を交えていきたいと思います。

JavaScript は、クラスの付け外しでしようしていますので必要に応じてスクロールに連動させたり、クリックイベント後に発火させたり調整して頂ければなと思います！

1. 下から1つずつ表示させる😄

最初から文字を1文字ずつspanタグで区切っていますが、Splitting.js のようなプラグインを使用するか、こちらの記事のように自作するのもおすすめです！
ちょっと変えれば今回のようにCSS変数を使ってインデックスを付与できると思います。

.char {
	display: inline-block;
	transform: translateY(var(--y, 110%));
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
 	transition-delay: calc(0.04s * var(--char-index));
}

上記のように、CSS変数で--yを設定しておくことで、

.text.is-active {
  --y: 0;
}

親要素に is-active をつけるだけでアニメーションを発火させるようにしています。
あまりCSSのネストを深くしたくなかったので。。。

また、ディレイもCSS変数を用いることで1文字ずつ設定したりSCSSのfor文を使用せずとも

transition-delay: calc(0.04s * var(--char-index));

この部分のみで完結しています！

ease は、 ease-in-out です。
グラフはこちら

自分的にこのアニメーションを使うイメージは、

• クール
• 情緒感
• 高級感

を表現したい時に使うことが多いです。

2. 横から1つずつ表示させる☺️

上から出るパータンを横からにしただけですが、雰囲気が結構変わります。

ease は、 ease-in-out です。
グラフはこちら

使うときのイメージは、

• クール
• テンポ感
• 高級感

で、上からパターンと少し同じではありますが見た目から感じるものが違うのでどちらかで統一してもいいですし、X,Y軸交互にやってもいいですし。。。
手札の1つとして覚えておける良きです！

3. フェードで1つずつ表示させる😇

次はフェードで出すバージョンです。

ease は、 ease-in-out です。
グラフはこちら

使うときのイメージは、

• クール
• 情緒感
• 高級感

です。
1つめの横から出るものと比べるとより情緒感が強く、ゆったりとした世界観を表現できます。

4. 斜めの状態から上から1つずつ表示させる😉

今度は、斜めの動きを追加させます。
これにより若干のポップな感じになるかと思います。

Y軸だけではなく、回転も変数で管理し下記コードのような実装となります。

.text.is-active {
	--y: 0;
	--rotate: 0;
}

.char {
	display: inline-block;
	transform: translateY(var(--y, -110%)) rotate(var(--rotate, -45deg));
	transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	transition-delay: calc(0.02s * var(--char-index));
}

ease は、 ease-in-out です。
グラフはこちら

使うときのイメージは、

• どちらかというとポップ
• テンポ感
• カジュアル

です。

5. 小さい状態から1ずつ大きして表示させる😘

今度は大きさ（scale）で1ずつ表示させます。
ポップな感じでありながら高級感も出すことが出来ます。
また、表示していくパターンと非表示にしていくパターンで、感じる雰囲気が違うのが面白いですね。

ease は、 ease-in-out 、弱めの ease-out を組み合わせています。
ease-in-out のグラフはこちら
弱めの ease-out のグラフはこちら

使うときのイメージは、

• どちらかというとポップ
• テンポ感
• 高級感

です。

6. 3つにスライスして横から表示させる😝

テキストブロックを3つ作成し、それぞれ position: absolute; を付与させて重ねています。
1つずつに mask-image を付与させることで上から33％、真ん中から33%、下から33％を表示させてそれぞれを動かしています。

.text1 {
	mask-image: linear-gradient(
		to bottom, 
		#000 33.3%, 
		transparent 33.3%
 	);
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

.text2 {
	mask-image: linear-gradient(
		to bottom,
		transparent 33.3%,
		#000 33.3%,
		#000 66.6%,
		transparent 66.6%
	);
	transform: translateX(var(--x, 110%)) skewX(var(--skewX, -40deg));
}

.text3 {
	mask-image: linear-gradient(
		to bottom, 
		transparent 66.6%, 
		#000 66.6%
 	);
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

上記のようなコードでマスクさせています。

さらに、skew を付与させることでスタイリッシュな雰囲気をプラスしています。

ease は、強めの ease-out です。
ease-out のグラフはこちら

使うときのイメージは、

• クール
• テンポ感
• カジュアル

です。

7. 色付きのボックスと一緒に横から表示させる😎

空divか疑似要素に background-color で色を付けて横から表示し、それに追従するようにテキストを表示させています。

.text::before,
.text::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50vh;
	transform: translateX(var(--cover-x, -101%));
	transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

ease は、色付きボックス（カバー）は 弱めの ease-out で、テキストは強めの ease-out を使用しています。
ディレイのタイミングも調整し、いい感じに重なりながら表示させるようにしています。
弱めの ease-out のグラフはこちら
強めの ease-out のグラフはこちら

使うときのイメージは、

• ポップ
• テンポ感
• カジュアル

です。

8. 横からギュッと縮小しながら表示させる🤩

この動きは、こちらの記事にある Squash and Stretch を意識したものです。

より凝った内容にする場合は、横からの移動、skew 、縮み、各々の ease やアニメーションのタイミングをずらしましょう。
より、記事のものに近づけるかなと思います。

また、今回はCSSアニメーションで実装しています。

.text.is-active {
	animation: text08 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes text08 {
	0% {
		opacity: 0;
		transform: translateX(20vw) scaleX(1) scaleY(1) skew(-60deg);
	}
	10% {
		opacity: 1;
	}
	80% {
		transform: scaleX(0.3) scaleY(1.2);
	}
	100% {
		transform: scaleX(1) scaleY(1);
	}
}

ease は、強めの ease-out です。
ease-out のグラフはこちら

使うときのイメージは、

• ポップ
• テンポ感
• カジュアル

です。

9. 横から順に照らされているように表示させる🤗

イメージとしては真っ暗な空間に灯台があり、テキストに対して横からライトがあたって見えているというものを想像して実装しています。

filter: blur を使用してボカシを入れ、CSSアニメーションで実装しています。
アニメーションの最後でまた非表示にし、duration 、delay を調整して表示しているされていない部分の間隔を調節しています。

.text > .char {
	filter: blur(8px);
	opacity: 0;
}

.text.is-active > .char {
	animation: text09 1s cubic-bezier(0.77, 0, 0.175, 1);
	animation-fill-mode: forwards;
	animation-delay: calc(0.12s * var(--char-index));
}

@keyframes text09 {
	0% {
		filter: blur(8px);
		opacity: 0;
	}
	33.3% {
		filter: blur(2px);
		opacity: 1;
	}
	50% {
		filter: blur(0);
		opacity: 1;
	}
	100% {
		filter: blur(4px);
		opacity: 0;
	}
}

ease は、ease-in-out です。
ease-in-out のグラフはこちら

使うときのイメージは、

• クール
• 情緒感
• カジュアル

です。

10. ババーンと下から表示させる🤠

下から大きく表示させています。
CSSアニメーション、ease-out-back を使用し、オーバーな動きを実装しています。

.text.is-active {
	animation: text08 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes text08 {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(150%);
	}
	30% {
		opacity: 1;
	}
	75% {
		transform: scale(1.5) translateY(-30%);
	}
	100% {
		transform: scale(1) translateY(0);
	}
}

また、ease-out-back のグラフはこちら

使うときのイメージは、

• ポップ
• テンポ感
• カジュアル

です。

まとめ🥳

手抜きというか、片手間に作成したものなので大変恐縮ですが如何でしたでしょうか？
今後もこれくらいの簡単なやつをまとめて、ブログとしてアウトプットしていきたいです。。。！

また、CodePen （コード付き）なのですぐに使えると思います。
どんどん使ってもらっても大丈夫ですので、少しでも参考になれば幸いです！