円形のマスクを使ったテキストが左から現れるCSSアニメーション

初期表示のテキストに重ねる形で、別の色のテキストが左側から現れるアニメーションを実装しました。コードのポイントを含めてメモ書きを残しておきます。

実装例

早速ですが、以下が実装例です。

テキストが流れるように現れるアニメーションには以下のようにいくつかの手法が考えられます。

今回は丸みを帯びた動きを表現したかったため、パフォーマンスと扱いやすさを考慮してclip-pathを選択しました。

どんな場面で使えるか

• ファーストビューのキャッチコピー（スクロール不要で目を引く）
• 下層ページのページタイトル（遷移直後のリッチな印象）
• セクション見出し（スクロール連動で発火）

テキスト量が多い本文や、頻繁に繰り返される要素には向かない印象です。「特別感」を出したい箇所にピンポイントで使うのが効果的です。

コードの解説

実装の内容を簡単に振り返ります。

HTML

pタグの中に全く同じテキストを2つ配置しています。pタグ直下のテキストが初期表示、spanタグのテキストがアニメーションで表示される色違いのテキストです。

1
<p class="text">Contact<span aria-hidden="true">Contact</span></p>

入れ子になっているspanタグのテキストには、aria-hidden="true"を付与してスクリーンリーダーでは読み上げないようにしています。

CSS

positionプロパティを使用して、上記の2つのテキストを全く同じ位置に重ねて配置しています。

1
.text {
2
  /* 省略 */
3
  position: relative;
4
}
5

6
.text span {
7
  position: absolute;
8
  top: 50%;
9
  left: 0;
10
  transform: translateY(-50%);
11
  /* 省略 */
12
}

青色のテキストはclip-pathプロパティで楕円形にクリップしているため、初期状態では表示されていません。 今回使用しているellipse()関数はCSS関数の一つで、構文は次の通りです。

1
ellipse(横半径 縦半径 at X座標 Y座標)

アニメーション前後でのellipse()関数の値の変化は次の通りです。

アニメーションの前後で変化しているのはatのX座標のみです。

円の半径にはカスタムプロパティで「テキストの横幅+テキストの1行分の高さ」を設定しています。つまりかなり大きな円形のマスクを作成しています。横半径と縦半径が等しいため、楕円ではなく円形のマスクになります。

1
.text {
2
  --_clip-radius: calc(100% + 1lh); /* 楕円の半径 */
3
  --_clip-offset-x: 0%; /* 楕円の横方向のオフセット */
4
  /* 省略 */
5
}
6

7
.text span {
8
  /* 省略 */
9
  height: var(--_clip-radius);
10
  clip-path: ellipse(
11
    var(--_clip-radius) var(--_clip-radius) at
12
      calc(var(--_clip-offset-x) - var(--_clip-radius)) 50%
13
  );
14
  transition: clip-path 1s cubic-bezier(0.87, 0, 0.13, 1);
15
}
16

17
.text.is-active {
18
  --_clip-offset-x: 100%; /* 楕円の横方向のオフセット（変化後） */
19
}

グレーの「Contact」の上に重ねた青い「Contact」のうち、円の内側だけが見えるので、円が左から右へ動くと青い文字が円形で現れて表示されます。アニメーションをテキスト化すると次のようになります。

• アニメーション前：巨大な楕円が要素の左外にあり、楕円の内側が要素と全く重ならない → 青テキストが完全に隠れる
• アニメーション中：楕円が右へスライドし、楕円の内側が要素と少しずつ重なり始める → 左から徐々に露出
• アニメーション後：楕円の内側が要素全体を覆う → 青テキストが完全に表示

図で表すと次のようなイメージです。

イージングで緩急をつけることで、視線をより誘導しやすいように工夫しています。

まとめ

今回は円形のclip-pathを利用して、テキストが左から流れるように現れるアニメーションを実装しました。

直線的なワイプでは物足りないが、ライブラリを使うほどではない。そのような場面でclip-path: ellipse()でのCSSアニメーションは、軽量かつ効果的な選択肢になると感じました。

円の半径やイージングの値を調整することで、表示スピードや丸みの印象を変えられます。また、X座標だけでなくY座標を動かすと縦方向へのアニメーションにも応用できそうです。

参考サイト

• clip-path - CSS | MDN