© 2016 電脳 Papa 1
1329-2 Linear Gradation のアニメーション（２）
背景（background）を線形グラデーション（Linear Gradation）のアニメーションにして
みましょう。
W3C 仕様では、background-image プロパティは transition プロパティでのトランジション
や animation プロパティでのアニメーションができないようになっています。
linear-gradient( )関数または repeating-linear-gradient( )関数は background-image プ
ロパティ（または background プロパティで一括指定した background-image）の値として指
定するので、トランジションやアニメーションにすることはできません。
（グラデーション
のトランジションやアニメーションは多用されそうですが、残念ですが現在の仕様ではで
きません。将来、仕様に取り込まれるかもしれませんが。
）
そこで、ここではどうしてもグラデーションのアニメーションを作りたいので、別の方法
であたかもアニメーションのように見せることにしました。
linear-gradient と repeating-linear-gradient の仕様は、別本「Transition を使いこな
す編」の「1237-1 線形グラデーション Linear Gradation (linear-gradient)」を参照し
てください。
●テキストの背景をグラデーションにして変化させる（１）
（webkit 仕様） （W3C 仕様）
サンプルＣＳＳ１
© 2016 電脳 Papa 2
背景の線形グラデーションをアニメーションのように見せる方法は、前章の#div4 ボックス
と同じ方法です。
（注）Safari （webkit 系ブラウザ）と Chrome（Webkit にも対応）は、テキストの輪郭や
色を、-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color
のプロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以
外のブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけにな
ります。
【LinearGradSlideAnime1 の説明】
〔HTML の記述 （LinearGradSlideAnime1.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
画像を記述します。
id 属性 div1 の div 要素の中に<span>タグで span 要素を２つ記述します。１つ目の span 要
素は、
span 要素を移動させてグラデーションが動くように見せます。
１つ目の span 要素は、
中にテキスト文字を記述します。
〔CSS の記述（LinearGradSlideAnime1.css）
〕
#stage ステージのスタイルを指定します。
#stage ステージは width: 450px; height: 550px;、
border: solid 1px black;を指定します。
<!DOCTYPE html> <html>
<head>
<title>LinearGradSlideAnime1</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="LinearGradSlideAnime1.css"> </head> <body> <p>■背景をグラデーションのスライドでアニメーションさせる。（１）</p> <div id="stage"> <div id="div1"> <span></span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html>
© 2016 電脳 Papa 3
#div1 ボックスを記述します。width は 450px、height は 550px にします。overflow: hidden;
を指定します。
#div1 ボックスの子要素の１つ目の span 要素を記述します。top は-550px、left は 0px で、
width は 450px、height は 1100px にします。span 要素の background プロパティを
repeating-linear-gradient( )関数を使用して上から下へレインボーカラーのグラデーシ
ョンを２回繰り返すように指定します。アニメーション名を grad1Anime、実行時間を 10s、
イージングを linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は normal で指
定します。
#div1 ボックスの子要素の２つ目の span 要素を記述します。top は 0px、left は 0px で、
width は 420px、height は 520px にします。テキスト文字を#div1 ボックスの中央に置きた
いので、padding: 30px 0px 0px 30px;を指定しています。
（そのため、width と height は
#stage {
width: 450px; height: 550px; border: solid 1px black; position: relative; } #div1 { top:0px; left: 0px; width: 450px; height: 550px; position: absolute; overflow: hidden; } #div1>span:nth-child(1) { top: -550px; left: 0px; width: 450px; height: 1100px; background-color: black;
background: repeating-linear-gradient( to bottom, #F00, #F0F 8.3%, #00F 16.6%, #0FF 24.9%, #0F0 33.2%, #FF0 41.5%, #F00 50% ); background: -webkit-repeating-linear-gradient( top, #F00, #F0F 8.3%, #00F 16.6%, #0FF 24.9%, #0F0 33.2%, #FF0 41.5%, #F00 50% );
position: absolute;
animation: grad1Anime 10s linear 0s infinite normal;
-webkit-animation: grad1Anime 10s linear 0s infinite normal; }
© 2016 電脳 Papa 4
30px ずつ減らして、#div1 ボックスに収まるようにしています。
）-webkit-text-stroke
-width: 3px;、-webkit-text-stroke-color: white;、-webkit-text-fill-color: black;
で文字の輪郭を描いています。
（これは Chrome と Safari だけの機能です。下の CSS には-webkit-の付いていない
text-stroke-width: 3px;、text-stroke-color: white;、text-fill-color: black;も指定
していますが、実際には機能しません。W3C 仕様にも取り込んでほしい機能です。）
アニメーション名 grad6Anime に対応するタイムライン（@keyframes）を指定します。この
span 要素を top: -550px;から top: 0px;に移動します。span 要素のグラデーションはレイ
ンボーカラーを２回繰り返すように指定してあるので、span 要素を半分移動したところで
また span 要素の先頭に戻るので、あたかもレインボーカラーが永久に繰り返すように見え
ます。
#div1>span:nth-child(2) { top: 0px; left: 0px; width: 420px; height: 520px; padding: 30px 0px 0px 30px; text-align: left;font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 3px; text-stroke-color: white; text-fill-color: black; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: white; -webkit-text-fill-color: black; position: absolute; } @keyframes grad1Anime { from { top: -550px; } to { top: 0px; } } @-webkit-keyframes grad1Anime { from { top: -550px; } to { top: 0px; } }
© 2016 電脳 Papa 5
●テキストの背景をグラデーションにして変化させる（２）
（webkit 仕様） （W3C 仕様）
サンプルＣＳＳ１と同じアニメーションを background-position、background-size などの
プロパティを使用して動かしてみます。
【LinearGradSlideAnime2 の説明】
〔HTML の記述 （LinearGradSlideAnime2.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
画像を記述します。
id 属性 div1 の div 要素の中に<span>タグで span 要素を１つ記述し、中にテキスト文字を
記述します。
サンプルＣＳＳ２
<!DOCTYPE html> <html> <head> <title>LinearGradSlideAnime2</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="LinearGradSlideAnime2.css"> </head> <body> <p>■background-position や backgruon-size などを使用して、<br> 背景のグラデーションをアニメーションさせる。（２）</p> <div id="stage"> <div id="div1"> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html>
© 2016 電脳 Papa 6
〔CSS の記述（LinearGradSlideAnime2.css）
〕
#stage ステージのスタイルを指定します。
#stage ステージは width: 450px; height: 550px;、
border: solid 1px black;を指定します。
#div1 ボックスを記述します。top は 0px、left は 0px で、width は 450px、height は 550px
にします。background-image プロパティを repeating-linear-gradient( )関数を使用して
上 か ら 下 へ レ イ ン ボ ー カ ラ ー の グ ラ デ ー シ ョ ン を ２ 回 繰 り 返 す 指 定 を し ま す 。
background-size: 100% 200%;と指定し、#div1 ボックスの高さの２倍のバックグラウンド
イメージにします。background-position: 0% 100%;と指定し、バックグラウンドイメージ
の下半分を#div1 ボックスに表示します。
アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
#div1 ボックスの子要素の span 要素を記述します。top は 0px、left は 0px で、width は
#stage {width: 450px; height: 550px; border: solid 1px black; position: relative; } #div1 { top:0px; left: 0px; width: 450px; height: 550px; background-color: orange;
background-image: repeating-linear-gradient( to bottom, #F00, #F0F 8.3%, #00F 16.6%, #0FF 24.9%, #0F0 33.2%, #FF0 41.5%, #F00 50% );
background-image: -webkit-repeating-linear-gradient( top, #F00, #F0F 8.3%, #00F 16.6%, #0FF 24.9%, #0F0 33.2%, #FF0 41.5%, #F00 50% ); background-position: 0% 100%; background-size: 100% 200%; background-repeat: no-repeat; background-attachment: scroll; background-origin: border-box; background-clip: border-box; position: absolute;
animation: grad1Anime 10s linear 0s infinite normal;
-webkit-animation: grad1Anime 10s linear 0s infinite normal; }
© 2016 電脳 Papa 7
420px、height は 520px にします。テキスト文字を#div1 ボックスの中央に置きたいので、
padding: 30px 0px 0px 30px;を指定しています。
（そのため、width と height は 30px ずつ
減らして、#div1 ボックスに収まるようにしています。
）
アニメーション名 grad1Anime に対応するタイムライン（@keyframes）を指定します。バッ
クグラウンドイメージの background-position を background-position: 0% 100%;から
background-position: 0% 0%;に移動します。バックグラウンドイメージのグラデーション
はレインボーカラーを２回繰り返すように指定してあるので、バックグラウンドイメージ
の上半分の表示が終わったところでまたバックグラウンドイメージの下半分に戻るので、
あたかもレインボーカラーが永久に繰り返すように見えます。
#div1 span { top: 0px; left: 0px; width: 420px; height: 520px; padding: 30px 0px 0px 30px; text-align: left;font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 3px; text-stroke-color: white; text-fill-color: black; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: white; -webkit-text-fill-color: black; position: absolute; } @keyframes grad1Anime { from { background-position: 0% 100%; } to { background-position: 0% 0%; } } @-webkit-keyframes grad1Anime { from { background-position: 0% 100%; } to { background-position: 0% 0%; } }
© 2016 電脳 Papa 8
●テキストの背景をグラデーションにして変化させる（３）
（webkit 仕様） （W3C 仕様）
Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）はテキストの輪郭や色を、
-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color のプ
ロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以外の
ブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけになりま
す。
ここでは円形の背景に線形グラデーションのアニメーションを動かし、その上にテキスト
文字を表示します。背景の線形グラデーションをアニメーションのように見せる方法は、
サンプルＣＳＳ２の LinearGradSlideAnime2.css と同じ方法です。
（注：サンプルＣＳＳ１の LinearGradSlideAnime1.css のように、グラデーションで染め
た子要素の span 要素を動かす方法を使用して、親要素を border-radius プロパティで円形
にして、overflow: hidden;を指定する（LinearGradSlideAnime3.css を参照してください）
と、Safari ブラウザだけがうまくいきません。Safari の場合、親要素を border-radius プ
ロパティで円形にして、overflow: hidden;を指定すると、overflow: hidden;が矩形（４
角形）について有効のようで、グラデーションが円形にならず矩形のままになります。
Safari の不具合でしょうか。他のブラウザではグラデーションが円形になります。
）
【LinearGradSlideAnime3 の説明】
〔HTML の記述 （LinearGradSlideAnime3.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
画像を記述します。
id 属性 div1 の div 要素の中に<span>タグで span 要素を１つ記述し、中にテキスト文字を
記述します。
© 2016 電脳 Papa 9
〔CSS の記述（LinearGradSlideAnime3.css）
〕
#stage ステージのスタイルを指定します。
#stage ステージは width: 550px; height: 550px;
を指定します。
#div1 ボックスを記述します。top は 0px、left は 0px で、width は 550px、height は 550px
にします。border-radius: 50%;と指定して円形にします。background-image プロパティを
repeating-linear-gradient( )関数を使用して上から下へレインボーカラーのグラデーシ
ョンを２回繰り返す指定をします。background-size: 100% 200%;と指定し、#div1 ボック
スの高さの２倍のバックグラウンドイメージにします。background-position: 0% 100%;と
指定し、バックグラウンドイメージの下半分を#div1 ボックスに表示します。
アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
<!DOCTYPE html> <html> <head> <title>LinearGradSlideAnime3</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="LinearGradSlideAnime3.css"> </head> <body> <p>■background-position や backgruon-size などを使用して、<br> 背景のグラデーションをアニメーションさせる。（３）</p> <div id="stage"> <div id="div1"> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html> #stage { width: 550px; height: 550px; position: relative; } #div1 { top:0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: orange;
© 2016 電脳 Papa 10
#div1 ボックスの子要素の span 要素を記述します。top は 0px、left は 0px で、width は
550px、height は 520px にします。テキスト文字を#div1 ボックスの中央に置きたいので、
padding-top: 30px;を指定しています。
（そのため、height を 30px 減らして、#div1 ボッ
クスに収まるようにしています。
）
アニメーション名 grad1Anime に対応するタイムライン（@keyframes）を指定します。バッ
クグラウンドイメージの background-position を background-position: 0% 100%;から
background-position: 0% 0%;に移動します。バックグラウンドイメージのグラデーション
はレインボーカラーを２回繰り返すように指定してあるので、バックグラウンドイメージ
の上半分の表示が終わったところでまたバックグラウンドイメージの下半分に戻るので、
#div1 span { top: 0px; left: 0px; width: 550px; height: 520px; padding-top: 30px; text-align: center;font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 3px; text-stroke-color: white; text-fill-color: black; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: white; -webkit-text-fill-color: black; position: absolute; }
background-image: repeating-linear-gradient( to bottom, #F00, #F0F 8.3%, #00F 16.6%, #0FF 24.9%, #0F0 33.2%, #FF0 41.5%, #F00 50% );
background-image: -webkit-repeating-linear-gradient( top, #F00, #F0F 8.3%, #00F 16.6%, #0FF 24.9%, #0F0 33.2%, #FF0 41.5%, #F00 50% ); background-position: 0% 100%; background-size: 100% 200%; background-repeat: no-repeat; background-attachment: scroll; background-origin: border-box; background-clip: border-box; position: absolute;
animation: grad1Anime 10s linear 0s infinite normal;
-webkit-animation: grad1Anime 10s linear 0s infinite normal; }
© 2016 電脳 Papa 11
あたかもレインボーカラーが永久に繰り返すように見えます。
●テキスト文字の中に背景のグラデーションを抜き出して変化させる（１）
注意：Chrome、Safari、Microsoft Edge だけの機能です（2016 年 4 月 24 日現在）
。
（webkit 仕様） （W3C 仕様）
Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）はテキストの輪郭や色を、
-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color のプ
ロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以外の
ブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけになりま
す。
また、webkit 系ブラウザは-webkit-text-fill-color に transparent（透明）を指定して、
-webkit-background-clip プロパティの値に text を指定すると、text 文字の形に合わせて
サンプルＣＳＳ４
@keyframes grad1Anime { from { background-position: 0% 100%; } to { background-position: 0% 0%; } } @-webkit-keyframes grad1Anime { from { background-position: 0% 100%; } to { background-position: 0% 0%; } }© 2016 電脳 Papa 12
背景を抜き出すことができますが、webkit 系以外のブラウザは text の指定ができません。
※Microsoft Edge は webkit 系ブラウザではありませんが、-webkit-text-fill-color プロ
パティと-webkit-background-clip プロパティについては、ベンダープリフィックスが
-webkit-であるにも関わらず対応してくれているようです。ですから-webkit-text-fill-
color に transparent（透明）を指定して、-webkit-background-clip プロパティの値に text
を指定すると、text 文字の形に合わせて背景を抜き出すことができます（やるじゃないで
すか Microsoft Edge）
。
背景の線形グラデーションをアニメーションのように見せる方法は、前章の#div1 ボックス
と同じように、opacity プロパティを利用する方法です。
【LinearGradInTextAnime1 の説明】
〔HTML の記述 （LinearGradInTextAnime1.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
画像を記述します。
id 属性 div1 の div 要素の中に<span>タグで span 要素を６つ記述し、それぞれの span 要素
は、中にテキスト文字を記述します。
<!DOCTYPE html> <html> <head> <title>LinearGradInTextAnime1</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="LinearGradInTextAnime1.css"> </head> <body> <p>■文字の内容を、グラデーションでアニメーションさせる。（１）</p> <div id="stage"> <div id="div1"> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html>
© 2016 電脳 Papa 13
〔CSS の記述（LinearGradInTextAnime1.css）
〕
#stage ステージのスタイルを指定します。
#stage ステージは width: 450px; height: 550px;
を指定します。
#div1 ボックスを記述します。width は 450px、height は 550px にします。overflow: hidden;
を指定します。background-color: black;を指定します。
#div1 ボックスの子要素として６つの span 要素を記述しますが、各 span 要素に共通のプロ
パティをまとめて指定します。
top は 0px、left は 0px で、width は 420px、height は 520px にします。グラデーションの
変化を opacity プロパティの値を変化させて行うので、値が０と１の変化の途中で#div1 ボ
ックスの黒い背景色が透けて見えて画像が暗くならないように background-color: white;
で指定します。
テキスト文字を#div1 ボックスの上辺と左辺から 30px 離して表示たいので、
span 要素のパディングを padding: 30px 0px 0px 30px;で指定しています。
（そのため、width
と height は 30px ずつ減らして、#div1 ボックスに収まるようにしています。
）テキストは
-webkit-text-stroke-width: 0px;、-webkit-text-stroke-color: #000000;、-webkit-text
-fill-color: transparent;で文字を透明にして描き、-webkit-background-clip: text;を
指定して文字の部分に背景のグラデーションを抜き出して表示させ、#div1 ボックスに重ね
ます。
（これは Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）だけの機能で
す。下の CSS には text-stroke-width: 0px;、text-stroke-color: #000000;、text-fill
-color: transparent;、background-clip: text;を指定していますが、実際には機能しま
せん。W3C 仕様にも取り込んでほしい機能です。
）
position: absolute;で指定します。opacity を opacity: 0.0;で指定します。
#stage { width: 450px; height: 550px; position: relative; } #div1 { top: 0px; left: 0px; width: 450px; height: 550px; background-color: black; position: absolute; }© 2016 電脳 Papa 14
以降は、各 span 要素で異なるプロパティを指定します。
#div1 ボックスの子要素の１番目の span 要素を記述します。span 要素の background-image
プロパティを linear-gradient( )関数を使用して上から下へ紫色
（#FF00FF）
、
青色
（#0000FF）
、
水色（#00FFFF）
、緑色（#00FF00）
、黄色（#FFFF00）
、赤色（#FF0000）に指定します。
アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
#div1 ボックスの子要素の２番目から６番目の span 要素は、１番目の span 要素と
background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い
ます。
２番目の span 要素を記述します。グラデーションの色の順番は、１つ分ずらして赤色
#div1 > span:nth-child(1) {background-image: linear-gradient(to bottom, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);
background-image: -webkit-linear-gradient(top, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); animation: grad1Anime 10s linear 0s infinite normal;
-webkit-animation: grad1Anime 10s linear 0s infinite normal; }
#div1 span {
top: 0px; left: 0px;
width: 420px; height: 520px;
/* TEXT を中央に配置するため padding-top と padding-left を 30px に指定しているので、 グラデーションも右方向と下方向に 30px はみ出す。
それを防ぐ為、width と height を 30px 減らしている。 */ background-color: white;
padding: 30px 0px 0px 30px; text-align: left;
font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 0px; text-stroke-color: #000000; text-fill-color: transparent; background-clip: text; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; position: absolute; opacity: 0.0; }
© 2016 電脳 Papa 15
（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色
（#FFFF00）に指定します。アニメーション名を grad2Anime と指定します。
３番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして黄
色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑
色（#00FF00）に指定します。アニメーション名を grad2Anime と指定します。
４番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして緑
色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水
色（#00FFFF）に指定します。アニメーション名を grad4Anime と指定します。
５番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして水
色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青
色（#0000FF）に指定します。アニメーション名を grad5Anime と指定します。
#div1 > span:nth-child(2) {background-image: linear-gradient(to bottom, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);
background-image: -webkit-linear-gradient(top, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); animation: grad2Anime 10s linear 0s infinite normal;
-webkit-animation: grad2Anime 10s linear 0s infinite normal; }
#div1 > span:nth-child(3) {
background-image: linear-gradient(to bottom, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);
background-image: -webkit-linear-gradient(top, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); animation: grad3Anime 10s linear 0s infinite normal;
-webkit-animation: grad3Anime 10s linear 0s infinite normal; }
#div1 > span:nth-child(4) {
background-image: linear-gradient(to bottom, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);
background-image: -webkit-linear-gradient(top, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); animation: grad4Anime 10s linear 0s infinite normal;
-webkit-animation: grad4Anime 10s linear 0s infinite normal; }
© 2016 電脳 Papa 16
６番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして青
色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫
色（#FF00FF）に指定します。アニメーション名を grad6Anime と指定します。
アニメーション名 grad1Anime から grad6Anime に対応するタイムライン（@keyframes）を
指定します。タイムラインを６分割（グラデーションの span の数）し、grad1Anime は６分
割の１番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。次に
grad2Anime は６分割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるよう
にします。同じように grad3Anime から grad6Anime も、６分割の３番目の時間から６番目
の時間で opacity: 1.0;にしてグラデーションが見えるようにします。
grad1Anime と grad6Anime は他タイムラインと少し違うところがあります。
grad1Anime は、
タイムラインの６番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。
grad6Anime は、タイムラインの６番目の時間を opacity: 0.0;にして、徐々に見えなくな
るようにします。これでテキスト文字の中に、あたかもレインボーカラーが永久に繰り返
すように見えます。
（注：タイムラインを７分割にしたり、opacity の値を変えるタイミングをいろいろ試して
みましたが、100%から 0%に戻るときにグラデーションが一瞬止まったりして、滑らかにグ
ラデーションが変化しなかったので、上で記述した方法が比較的良いようです。
）
#div1 > span:nth-child(5) {background-image: linear-gradient(to bottom, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);
background-image: -webkit-linear-gradient(top, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); animation: grad5Anime 10s linear 0s infinite normal;
-webkit-animation: grad5Anime 10s linear 0s infinite normal; }
#div1 > span:nth-child(6) {
background-image: linear-gradient(to bottom, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);
background-image: -webkit-linear-gradient(top, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); animation: grad6Anime 10s linear 0s infinite normal;
-webkit-animation: grad6Anime 10s linear 0s infinite normal; }
© 2016 電脳 Papa 17 /* grad1Anime ************************************************************/ @keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } /* grad2Anime ************************************************************/ @keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad3Anime ************************************************************/ @keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; }
© 2016 電脳 Papa 18 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad4Anime ************************************************************/ @keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad5Anime ************************************************************/ @keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } /* grad6Anime ************************************************************/ @keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; }
© 2016 電脳 Papa 19
●テキスト文字の中に背景のグラデーションを抜き出して変化させる（２）
注意：Chrome、Safari、Microsoft Edge だけの機能です（2016 年 4 月 24 日現在）
。
（webkit 仕様） （W3C 仕様）
Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）はテキストの輪郭や色を、
-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color のプ
ロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以外の
ブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけになりま
す。
また、webkit 系ブラウザは-webkit-text-fill-color に transparent（透明）を指定して、
84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }サンプルＣＳＳ５
© 2016 電脳 Papa 20
-webkit-background-clip プロパティの値に text を指定すると、text 文字の形に合わせて
背景を抜き出すことができますが、webkit 系以外のブラウザは text の指定ができません。
※Microsoft Edge は webkit 系ブラウザではありませんが、-webkit-text-fill-color プロ
パティと-webkit-background-clip プロパティについては、ベンダープリフィックスが
-webkit-であるにも関わらず対応してくれているようです。ですから-webkit-text-fill-
color に transparent（透明）を指定して、-webkit-background-clip プロパティの値に text
を指定すると、text 文字の形に合わせて背景を抜き出すことができます（やるじゃないで
すか Microsoft Edge）
。
背景の線形グラデーションをアニメーションのように見せる方法は、サンプルＣＳＳ４の
LinearGradInTextAnime1.css と同じように、opacity プロパティを利用する方法です。
【LinearGradInTextAnime5 の説明】
〔HTML の記述 （LinearGradInTextAnime5.html）
〕
id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや
画像を記述します。
id 属性 div1 の div 要素の中に<span>タグで span 要素を６つ記述し、それぞれの span 要素
は、中にテキスト文字を記述します。
<!DOCTYPE html> <html> <head> <title>LinearGradInTextAnime5</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="LinearGradInTextAnime5.css"> </head> <body> <p>■文字の内容を、グラデーションでアニメーションさせる。（５）</p> <div id="stage"> <div id="div1"> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html>
© 2016 電脳 Papa 21
〔CSS の記述（LinearGradInTextAnime5.css）
〕
#stage ステージのスタイルを指定します。
#stage ステージは width: 550px; height: 550px;
を指定します。
#div1 ボックスを記述します。width は 550px、height は 550px にします。border-radius:
50%;と指定して円形にします。background-color: black;を指定します。
#div1 ボックスの子要素として６つの span 要素を記述しますが、各 span 要素に共通のプロ
パティをまとめて指定します。
top は 0px、left は 0px で、width は 550px、height は 520px にします。グラデーションの
変化を opacity プロパティの値を変化させて行うので、値が０と１の変化の途中で#div1 ボ
ックスの黒い背景色が透けて見えて画像が暗くならないように background-color: white;
で指定します。円形にしたいので border-radius: 50%;と指定します。テキスト文字を#div1
ボックスの中央に置きたいので、横方向は text-align: center;で中央に指定し、縦方向は
span 要素のパディングを padding-top: 30px;で指定しています。
（そのため、height は 30px
ず つ 減 ら し て 、 #div1 ボ ッ ク ス の 中 央 に 収 ま る よ う に し て い ま す 。） テ キ ス ト は
-webkit-text-stroke-width: 0px;、-webkit-text-stroke-color: #000000;、-webkit-text
-fill-color: transparent;で文字を透明にして描き、-webkit-background-clip: text;を
指定して文字の部分に背景のグラデーションを抜き出して表示させ、#div1 ボックスに重ね
ます。
（これは Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）だけの機能で
す。下の CSS には text-stroke-width: 0px;、text-stroke-color: #000000;、text-fill
-color: transparent;、background-clip: text;を指定していますが、実際には機能しま
せん。W3C 仕様にも取り込んでほしい機能です。
）
#stage { width: 550px; height: 550px; position: relative; } #div1 { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: black; position: absolute; }© 2016 電脳 Papa 22
position: absolute;で指定します。opacity を opacity: 0.0;で指定します。
以降は、各 span 要素で異なるプロパティを指定します。
#div1 ボックスの子要素の１番目の span 要素を記述します。span 要素の background-image
プロパティを linear-gradient( )関数を使用して上から下へ紫色
（#FF00FF）
、
青色
（#0000FF）
、
水色（#00FFFF）
、緑色（#00FF00）
、黄色（#FFFF00）
、赤色（#FF0000）に指定します。
アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
#div1 ボックスの子要素の２番目から６番目の span 要素は、１番目の span 要素と
background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い
ます。
#div1 > span:nth-child(1) {
background-image: linear-gradient(to bottom, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);
background-image: -webkit-linear-gradient(top, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); animation: grad1Anime 10s linear 0s infinite normal;
-webkit-animation: grad1Anime 10s linear 0s infinite normal; } #div1 span { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているため、 グラデーションも 30px 下にずれる。それを防ぐ為、height を 550px ではなく 530px で指定し、グラデーションの中心を合わせている。 */ border-radius: 50%; background-color: white; padding-top: 30px; text-align: center;
font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 0px; text-stroke-color: #000000; text-fill-color: transparent; background-clip: text; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; position: absolute; opacity: 0.0; }
© 2016 電脳 Papa 23
２番目の span 要素を記述します。グラデーションの色の順番は、１つ分ずらして赤色
（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色
（#FFFF00）に指定します。アニメーション名を grad2Anime と指定します。
３番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして黄
色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑
色（#00FF00）に指定します。アニメーション名を grad3Anime と指定します。
４番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして緑
色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水
色（#00FFFF）に指定します。アニメーション名を grad4Anime と指定します。
５番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして水
色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青
色（#0000FF）に指定します。アニメーション名を grad5Anime と指定します。
#div1 > span:nth-child(2) {background-image: linear-gradient(to bottom, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);
background-image: -webkit-linear-gradient(top, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); animation: grad2Anime 10s linear 0s infinite normal;
-webkit-animation: grad2Anime 10s linear 0s infinite normal; }
#div1 > span:nth-child(3) {
background-image: linear-gradient(to bottom, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);
background-image: -webkit-linear-gradient(top, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); animation: grad3Anime 10s linear 0s infinite normal;
-webkit-animation: grad3Anime 10s linear 0s infinite normal; }
#div1 > span:nth-child(4) {
background-image: linear-gradient(to bottom, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);
background-image: -webkit-linear-gradient(top, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); animation: grad4Anime 10s linear 0s infinite normal;
-webkit-animation: grad4Anime 10s linear 0s infinite normal; }
© 2016 電脳 Papa 24
６番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして青
色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫
色（#FF00FF）に指定します。アニメーション名を grad6Anime と指定します。
アニメーション名 grad1Anime から grad6Anime に対応するタイムライン（@keyframes）を
指定します。タイムラインを６分割（グラデーションの span の数）し、grad1Anime は６分
割の１番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。次に
grad2Anime は６分割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるよう
にします。同じように grad3Anime から grad6Anime も、６分割の３番目の時間から６番目
の時間で opacity: 1.0;にしてグラデーションが見えるようにします。
grad1Anime と grad6Anime は他タイムラインと少し違うところがあります。
grad1Anime は、
タイムラインの６番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。
grad6Anime は、タイムラインの６番目の時間を opacity: 0.0;にして、徐々に見えなくな
るようにします。これでテキスト文字の中に、あたかもレインボーカラーが永久に繰り返
すように見えます。
#div1 > span:nth-child(5) {
background-image: linear-gradient(to bottom, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);
background-image: -webkit-linear-gradient(top, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); animation: grad5Anime 10s linear 0s infinite normal;
-webkit-animation: grad5Anime 10s linear 0s infinite normal; }
#div1 > span:nth-child(6) {
background-image: linear-gradient(to bottom, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);
background-image: -webkit-linear-gradient(top, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); animation: grad6Anime 10s linear 0s infinite normal;
-webkit-animation: grad6Anime 10s linear 0s infinite normal; } /* grad1Anime ************************************************************/ @keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; }
© 2016 電脳 Papa 25 84% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } /* grad2Anime ************************************************************/ @keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad3Anime ************************************************************/ @keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } }
© 2016 電脳 Papa 26 /* grad4Anime ************************************************************/ @keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad5Anime ************************************************************/ @keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } /* grad6Anime ************************************************************/ @keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; }
© 2016 電脳 Papa 27 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }
