フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
【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はこちら。
<p>IRODORI DESIGN</p>実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
関連記事一覧
【コピペOK】WEBサイトでよく使う見出しデザインWEBサイトを制作している際、ついつい迷ってしまったり、ワンパターンになってしまう見出しのデザイン。ワンパターン化してし […]
【コピペOK】CSSでの吹き出しの作り方WEBサイトで吹き出しを作りたいと思った際、実はCSSだけで吹き出しを作ることは出来るんです。今回の記事ではCSSでの吹 […]
【コピペ】CSSのclip-pathで色んな図形に切り抜く／サンプルコードCSSのclip-pathプロパティを使うことで要素の表示範囲を定義するために使用されます。要素の可視部分を特定の形状に […]
【CSS】文字サイズを変えるfont-sizeプロパティの使い方HTMLやCSSを学んでいる際、序盤に学ぶfont-sizeプロパティ。font-sizeプロパティはテキストの文字サイ […]
【コピペOK】WEBデザインで使えるシンプルなボタンデザイン18選コピペですぐに使えるCSSで作るの使い勝手抜群なシンプルなボタンデザインを18種類集めてみました。 なお、ボタンにマウス […]
【CSS】各プロパティの初期値一覧CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。このプロパティの初期値って何だったかな […]
【テクニック】CSSで蛍光ペン風のマーカーを作る方法WWEBサイト作成時に情報を強調するための方法は多岐にわたります。訪問者の注意を引きつけ、情報伝達を効果的にするための手 […]
【CSS】背景・テキスト・枠線にグラデーションをかける方法背景やテキスト、枠線にグラデーションがかけられている場面に遭遇したことはありませんか？これらにグラデーションがかけられて […]
【CSS】z-indexが効かない時の原因と解決方法CSSのプロパティのひとつ「z-index」。このプロパティは要素同士の重なり順を指定する場合に使用します。基本的に数値 […]
【コピペOK】ボタンにホバーした時のCSSアニメーション15選ボタンにホバーした時のアニメーションがいつも同じになっているコーダーも多いのではないでしょうか。デザイナーからホバーした […]
【background-image】CSSだけでストライプ（ボーダー）やドット模様を作るサンプル集CSSのbackground-imageを使うことでストライプ（ボーダー）やドット模様など意外と色んな背景模様を作ること […]
【CSS】斜めの背景やリンクを設定する方法デザイナーがちょっとした遊び心で斜めのコンテンツを作ったとします。それをコーダーがHTMLとCSSで実現するには少し工夫 […]