CSSとJavascriptを使ってリッチなテキストアニメーションを作りたい!🍨
そんな時に見る記事です。
テキストアニメーションといえば、webサイトをリッチに見せる為に使われる定番の技術ですよね。
お馴染みのデザインであっても、洗練されたアニメーションを付与してあげることで一気にユーザーの記憶に残るデザインに昇華させることが可能となります。
本記事では、デザイン制作のお供になるようなアニメーションはもちろん、感性を刺激するようなアーティスティックなアニメーションまで幅広く集めてみました。
もちろん、ここにあるサンプルはコピペOKですので是非、デザインの参考にしてみてくださいね。

目からウロコの作品ばかり!
必見だぞ!
それではどうぞ!
CSSとJavascriptで作る美しいテキストアニメーション10選【コピペOK】
美しいネオンが煌く
ランダムの表現はjsを使って表現されています。とっても綺麗ですね。
See the Pen
Neon text flicker glow by Johan Girod (@ganceab)
on CodePen.
うねっとした波のイメージ
複雑そうに見えるアニメーションですが、なんとcssのみで実装可能。
水色のニュッとしたアニメーションはtransformを使って表現されています
See the Pen
wave (CSS animation) by Anton Mudrenok (@mudrenok)
on CodePen.
フォーカスしているところ以外がボケる
ちょっとオシャレなゲームにありそうな演出がcssだけで可能です。
clipプロパティを使用することで実現しています。
See the Pen
Focus by Ahmad Shadeed (@shadeed)
on CodePen.
svgテキストのストロークアニメーション
これは結構みたことある人多い定番のアニメーションかもです。
実装難易度が易しい割にインパクトを与えることができるアニメーションです。
stroke-dashoffsetプロパティをanimationで動かすだけです。
See the Pen
CSS3 – SVG Text Animation by HIPE (@hipe)
on CodePen.
マト◯ックスを彷彿とさせるアニメーション
思わず「wake up neo…」と呟いてしまいそうになるアニメーション。もしかして若い人は元ネタ知らないかも?笑
See the Pen
Wake up, Neo…reloaded by Victor Casals (@vsdigital)
on CodePen.
みんなで遊ぼう!Nintendo S◯itch
人によっては毎日遊ぶであろう、某ゲーム機のCMでよく見るアレ。
See the Pen
Switch Logo by William A. | Keyon (@Keyon)
on CodePen.
気分はハッカー
リロードしてみてくださいー。
コマンドプロンプトを彷彿とさせるアニメーション。
See the Pen
Animation text by joxxce (@joxxce)
on CodePen.
下から上に、するっと動くアニメーションが気持ちいい
これ多分一番実用的かもです。
メインビジュアルのアニメーションで使えそうですね。
See the Pen
Progress bar on scroll & Text Animation by Adel Elkhodary (@AElkhodary)
on CodePen.
タイピングをイメージ
一文字ずつタイピングしたようなアニメーション。
発想が面白いですね!
See the Pen
Animation Text by Oguzhanygtr by Oğuzhan Yiğiter (@oguzhanygtr)
on CodePen.
svgアニメーション再び
ごめんなさい、個人的にこのアニメーション好きなのでもう一回出しちゃいました笑
アニメーションは同じなのに、色が違うだけで与える印象を変えることができるのが面白いですよね。
See the Pen
CSS animation. Text by edolgushina (@CatherineCD)
on CodePen.
まとめ
いかがでしたか?
今回はcssとjsで作るアッと驚くテキストアニメーションをまとめてみました。
発想次第では、難しいjsを使わなくてもcssだけで美しいアニメーションを作成することが可能となります。
ぜひ参考にしてみてくださいね。
それでは本日はここら辺で。