【CSS】テキストのグラデーションをアニメーションさせる方法

RELEASE / 2025.4.15 UPDATE / 2025.04.18

CSSアニメーション

グラデーション

テキストにグラデーションを設定し、そのテキスト内でグラデーションが行ったり来たりするアニメーション。
文章だけだとイメージが付きにくいと思うので、あれこれ書くよりも早速どんなアニメーションを実装しようとしているのか見ていきましょう。

この記事の目次を表示

1 実装サンプル
2 解説
3 まとめ

実装サンプル

まずは実装サンプルを見てみましょう。

用意するCSSはこちら。

p{
    font-size: 36px;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 25%, rgba(199, 190, 87, 1) 50%, rgba(0, 0, 0, 1) 75%);
    background-size: 200%;
    animation: gradation 5s infinite linear;
}
@keyframes gradation {
    0%{
        background-position: 0% 0%;
    }
    50%{
        background-position: 100% 0%;
    }
    100%{
        background-position: 0% 0%;
    }
}

このCSSを反映させるHTMLタグはどんなものでも良いですが、サンプルはpタグに対して設定しています。

<p>IRODORI DESIGN</p>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

ここからはコードの解説です。

まずはグラデーションをかけるために以下の設定をします。

background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 25%, rgba(199, 190, 87, 1) 50%, rgba(0, 0, 0, 1) 75%);
background-size: 200%;

25%までは黒、その後50%に向けて金色に変化し、さらに75%にかけて再び黒に戻る左右対称のグラデーションを用意します。
そして、background-size: 200%;とする事で、グラデーションの50%の部分までが表示されるようにサイズ調整をします。

このCSSを当てた状態だと以下のようになります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

続いてCSSでアニメーションを作成します。

@keyframes gradation {
    0%{
        background-position: 0% 0%;
    }
    50%{
        background-position: 100% 0%;
    }
    100%{
        background-position: 0% 0%;
    }
}

アニメーションが始まり、全体の50%経過するタイミングで、background-position: 100% 0%;とする事でグラデーション位置を100%ずらします。
これにより、見切れていた部分のグラデーションが見えるようになります。
そして、再びグラデーションをbackground-position: 0% 0%;とする事で元の位置に戻していきます。
これにより、グラデーションがスライドするような動きになり、中央の金色部分が動いて見える演出が可能になります。

animation: gradation 5s infinite linear;

このアニメーションを5秒かけてループ再生するように設定します。

ここまでの状態で確認するとこんな感じになっています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

そして、最後に以下のCSSを指定します。

background-clip: text;
-webkit-background-clip: text;
color: transparent;

background-clip: text;を指定して、背景をテキストの形に切り抜きます。
プレフィックスの指定も忘れずにしましょう。
そして、color: transparent;にすることで、テキスト自体の色を透明にし、背景が文字として見えるようにします。

これで、テキストに適用されたグラデーションが動くアニメーションが完成します。

まとめ

いかがでしたか？
グラデーションの指定やアニメーションの指定次第で面白い表現ができそうですね。
テキストがグラデーションになっているデザインの場合は是非取り入れてみてください。

最後にもう一度コードをご紹介します。

CSSはこちら。

p{
    font-size: 36px;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 25%, rgba(199, 190, 87, 1) 50%, rgba(0, 0, 0, 1) 75%);
    background-size: 200%;
    animation: gradation 5s infinite linear;
}
@keyframes gradation {
    0%{
        background-position: 0% 0%;
    }
    50%{
        background-position: 100% 0%;
    }
    100%{
        background-position: 0% 0%;
    }
}

HTMLはこちら。