おしゃれな文字アニメーション3選

August 5, 2025

おしゃれな文字アニメーションのやり方教えて♪

いいよ！では見てみよう♪

1文字ずつ下から表示

See the Pen 1文字ずつ下から表示 by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

HTML

<p class="text js-text">
<span>C</span><span>o</span><span>d</span><span>e</span><span>&nbsp;</span><span>V</span><span>o</span><span>y</span><span>a</span><span>g</span><span>e</span>
</p>

各文字を<span>タグで囲むことで、個別にスタイルやアニメーションを適用できるようにしています

CSS

.text {
  color: #333;
  font-family: "EB Garamond", sans-serif;
  font-size: 72px;
  font-weight: 700;
  overflow: hidden;

  > span {
    display: inline-block;
    animation: showText 0.5s both;
  }
}

@keyframes showText {
  0% {
    translate: 0 100%;
  }
  
  100% {
    translate: 0 0;
  }
}

/* レイアウト用 */
body {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100vh;
}

@keyframesを使って、アニメーションの動きを定義します。ここでは、文字が下から上に移動するアニメーションを設定しています。
.text > spanに対して、animationプロパティを使ってアニメーションを適用します。これにより、各文字に対して定義したアニメーションが実行されます

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const letters = document.querySelectorAll('.js-text > span');
  letters.forEach((letter, index) => {
    letter.style.animationDelay = `${index * 0.1}s`;
  });
});

JavaScriptを使って、各<span>要素に異なるanimation-delayを設定し、文字が順番にアニメーションされるようにします。

1文字ずつフェードで表示

See the Pen 1文字ずつフェードで表示 by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

HTML

<p class="text js-text">
<span>C</span><span>o</span><span>d</span><span>e</span><span>&nbsp;</span><span>v</span><span>o</span><span>y</span><span>a</span><span>g</span><span>e</span>
</p>

各文字を<span>タグで囲むことで、個別にスタイルやアニメーションを適用できるようにしています。

CSS

.text {
  color: #333;
  font-family: "EB Garamond", sans-serif;
  font-size: 72px;
  font-weight: 700;
  overflow: hidden;

  > span {
    display: inline-block;
    animation: fadeIn 0.9s both;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

/* レイアウト用 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

@keyframesを使って、アニメーションの動きを定義します。ここでは、文字がフェードインするアニメーションを設定しています。
.text > spanに対して、animationプロパティを使ってアニメーションを適用します。これにより、各文字に対して定義したアニメーションが実行されます。

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const letters = document.querySelectorAll('.js-text > span');
  letters.forEach((letter, index) => {
    letter.style.animationDelay = `${0.5 + index * 0.1}s`;
  });
});

JavaScriptを使って、各

<span>要素に異なる

animation-delayを設定し、文字が順番にアニメーションされるようにします。0.5秒待ってから、0.1秒ずつかけてフェイドインで表示されます。

背景から文字が表示

See the Pen 背景で隠れてから文字が表示 by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

HTML

<p class="text is-animation">
<span>Code voyage</span>
</p>

CSS

.text {
  display: inline-block;
  color: #333;
  font-family: "EB Garamond", sans-serif;
  font-size: 72px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: "";
    background: linear-gradient(to left, #666666, #888888);
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    will-change: transform;
  }
}

.text.is-animation::after {
  animation: coverText 1s ease-out both;
}

.text span {
  position: relative;
  opacity: 0;
}

.text.is-animation span {
  animation: showText 0.5s ease-out 1s both;
}

@keyframes showText {
  /* 0s */
  0% {
    opacity: 0;
  }

  /* 0.5s */
  100% {
    opacity: 1;
  }
}

@keyframes coverText {
  0% {
    transform: translateX(-100%);
  }
  40%, 60% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(101%);
  }
}

/* レイアウト用 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

.textクラスに::after疑似要素を使って、文字の背景を覆うアニメーションを設定しています。初期状態はtranslateで-100%の位置に配置することで、文字の左側で待機している状態となります。

.text.is-animation::afterに対して、animationプロパティを使ってアニメーションを適用します。これにより、背景が左から右に移動するアニメーションが実行されます。