テキストにグラデーションのアニメーションを加える

CSSが好きなりょーたです。
今回は、ポートフォリオで実装しているテキストのグラデーションを使ったアニメーションの実装方法を紹介します。

実際の成果物は以下をご覧ください。

ダークモード

ライトモード

これを見て既視感を感じた方はおそらくAmazon Prime Videoを使っている方でしょうか？？笑
本家はおそらくアニメーションを作って埋め込んでいるのだと思うのですが、今回は、HTMLとCSSでやってみました。

アニメーションの色やスピードは自由に設定できますので、ご自由にお試しくださいね！😜

実装方法

どのように構成されているかというと、以下の図の通り、２層のレイヤーに別れています。

構造

上の層は、半分の幅の、２つのパネルを左右に並べています。それぞれのパネルにグラデーションの色があり、その色を対称的に移動させます。

下の層は、文字を切り抜いた画像があります。文字色は画像で書き出した際に指定している色となるため、ポートフォリオの例のようにダークモード/ライトモードで分けたい場合は、画像も黒字と白字で用意させる必要があります。

それでは、実際にコードを見てみましょう。

HTML

<div class="text-container" aria-label="[テキスト]">
 　{/* 下の層 */}
  <div class="image-box" role="presentation">
    {/* 上の層 */}
    <div class="left-move bg" role="presentation" />
    <div class="right-move bg" role="presentation" />
  </div>
</div>

CSS

.text-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-box {
  display: flex;
  width: 480px;
  height: 120px;
  background: white;
  -webkit-mask-image: url('[画像パス].svg');
  mask-image: url('[画像パス].svg');
}

.bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 25%,
      #f8ff9b 30%,
      #3fd1df 38%,
      #bed480 46%,
      #9f86e4 56%,
      #76bedb 65%,
      #ffffff 75%,
      #ffffff 100%
    )
    0 0 / 400% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .left-move {
    animation: move-left-bg 2s linear;
  }
  .right-move {
    animation: move-left-bg 2s linear;
    transform: rotate(180deg);
  }
  @keyframes move-left-bg {
    to {
      background-position: 100% 0;
    }
  }
}

ポイント１：アクセシビリティのためにaria-label属性をつける。

今回のように、テキストの画像を用いている場合など、意味のある画像を用いる場合は、aria-label属性をつけることで、スクリーンリーダーで読み上げ可能にする必要があります。

ポイント２：グラデーションの位置を調整

冒頭の成果物では、表示してすぐには、グラデーションがない、本来の画像の色が表示されています。これは、background-sizeプロパティによってwidth方向に引き伸ばし、見える領域の外にグラデーションを置いているためです。（400%がそれにあたります。ご自身の画像や表示サイズに合わせて調整してみてください！）

background: linear-gradient( 90deg, [COLOR] ) 0 0 / 400% 100%;

ポイント３：アニメーションさせるかどうかはユーザーの設定を優先させる

ユーザーによっては、アニメーションをできるだけ減らして欲しいというニーズがあり、過度なアニメーションを表現として利用しない必要があります。
そのために、prefers-reduced-motionというメディア特性を用いて実装を行います。

今回で言うと、グラデーションのアニメーションを対象としているので、以下のようなCSSになります。

@media (prefers-reduced-motion: no-preference) {
  .left-move {
    animation: move-left-bg 2s linear;
  }
  .right-move {
    animation: move-left-bg 2s linear;
    transform: rotate(180deg);
  }
  @keyframes move-left-bg {
    to {
      background-position: 100% 0;
  }
}

この設定はマストではないものの、健常者にはわからない世界ではあるので、不安に思うのであれば設定して差し支えないかなと思います。

prefers-reduced-motionについては以下を参照ください。

prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN

最後に

実装してみたい！と思っていただけたら幸いです
もし実装でわからないところがあればお気軽にご相談いただければと思います😊