CSSで実装！文字がくるっと回転して切り替わるアニメーションの作り方

3月 19, 2025 5月 16, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「Webサイトに動きのあるデザインを取り入れたい」
「文字が切り替わるアニメーションを作りたいけど、どうやって実装するの？」

そんな方におすすめなのが、文字がくるっと回転して切り替わるアニメーションです。

CSSだけで実装できるので、JavaScriptなしで手軽に導入できます。

この記事では、コピペで使えるHTMLとCSSのコードを紹介しますので、ぜひお試しください！

文字がくるっと回転して切り替わるアニメーションの実装

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTMLのコード

<div class="text-rotate"> <span>Webデザイン</span> <span>コーディング</span> <span>アニメーション</span> </div>

CSSのコード

.text-rotate { display: inline-block; height: 1.5em; overflow: hidden; position: relative; } .text-rotate span { display: block; animation: rotateText 6s linear infinite; } @keyframes rotateText { 0% { transform: translateY(0%); } 33% { transform: translateY(-100%); } 66% { transform: translateY(-200%); } 100% { transform: translateY(0%); } }

ポイント解説

.text-rotateクラスで、文字を表示するエリアの高さを指定し、オーバーフローを隠すことで、1行分のみが表示される仕組みです。
.text-rotate spanにdisplay: block;を指定することで、文字が縦に並ぶようになります。
@keyframes rotateTextでは、translateYで文字の位置をずらし、スムーズに回転させるアニメーションを作成しています。

応用編：回転エフェクトを加える

さらに、回転しながら文字が切り替わるアニメーションにアレンジすることもできます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

.text-rotate span { display: block; animation: rotateText 6s linear infinite, rotateEffect 6s linear infinite; } @keyframes rotateEffect { 0%, 100% { transform: rotateX(0deg); } 33% { transform: rotateX(180deg); } 66% { transform: rotateX(360deg); } }