1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation (radial-gradient) を参照し てください radial-gradient( ) 関数または repeating-radial-gradient( ) 関数は background-image プロパティ ( または background プロパティで一括指定した中の background-image) の値として指定します W3C 仕様では background-image プロパティはアニメーションできないようになっているので transition プロパティや animation プロパティでアニメーションにすることができません ( グラデーションのアニメーションは多用されそうですが 残念ですが現在の仕様ではできません 将来 仕様に取り込まれるかもしれませんが ) そこで どうしてもグラデーションのアニメーションを作りたいので 別の方法であたかもアニメーションのように見せることにします サンプル CSS1 テキストの背景を円形グラデーションにして変化させる (1) (webkit 仕様 ) (W3C 仕様 ) 1
( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが W3C 仕様には同様の機能がないので webkit 系以外のブラウザ (Firefox IE など ) はテキストの色を color プロパティで指定するだけになります 背景の円形グラデーションをアニメーションのように見せる方法は opacity プロパティを利用する方法です RadialGradAndTextAnime1 の説明 HTML の記述 (RadialGradAndTextAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を6つ記述します id 属性 text1 の div 要素の中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>radialgradandtextanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="radialgradandtextanime1.css"> </head> <body> <p> 背景を円形グラデーションでアニメーションさせる (1)</p> <div id="stage"> <div id="div1"> <span></span><span></span><span></span><span></span><span></span><span></span> </div> <div id="text1">abc<br>defghij<br>klmnop<br>qrstuv<br>wxyz</div> </div> </body> </html> CSS の記述 (RadialGradAndTextAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 550px; height: 550px; を指定します #stage { width: 550px; height: 550px; position: relative; 2
#div1 ボックスを記述します width は 550px height は 550px にします #div1 { top:0px; left: 0px; width: 550px; height: 550px; position: absolute; #div1 ボックスの子要素として6つの span 要素を記述しますが 各 span 要素に共通のプロパティをまとめて指定します top は 0px left は 0px で width は 550px height は 550px にします グラデーションの変化を opacity プロパティの値を変化させて行うので 値が 0と1の変化の途中で #div1 ボックスの黒い背景色が透けて見えて画像が暗くならないように background-color: white; で指定します position: absolute; で指定します opacity を opacity: 0.0; で指定します #div1 span { top: 0px; left: 0px; width: 550px; height: 550px; background-color: white; position: absolute; opacity: 0.0; 以降は 各 span 要素で異なるプロパティを指定します #div1 ボックスの子要素の1 番目の span 要素を記述します span 要素の background-image プロパティを radial-gradient( ) 関数を使用して farthest-corner at 50% 50%(webkit 系ブラウザは 50% 50%, farthest-corner) で span 要素の中心から4 隅の角に向かって紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色(#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) に指定します アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(1) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); animation: grad1anime 10s linear 0s infinite normal; -webkit-animation: grad1anime 10s linear 0s infinite normal; 3
#div1 ボックスの子要素の2 番目から6 番目の span 要素は 1 番目の span 要素と background-image プロパティのグラデーションの色の順番とアニメーション名だけが違います 2 番目の span 要素を記述します グラデーションの色の順番は 1つ分ずらして赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色(#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) に指定します アニメーション名を grad2anime と指定します #div1 > span:nth-child(2) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); animation: grad2anime 10s linear 0s infinite normal; -webkit-animation: grad2anime 10s linear 0s infinite normal; 3 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして黄 色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑 色 (#00FF00) に指定します アニメーション名を grad3anime と指定します #div1 > span:nth-child(3) { background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); animation: grad3anime 10s linear 0s infinite normal; -webkit-animation: grad3anime 10s linear 0s infinite normal; 4 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして緑 色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水 色 (#00FFFF) に指定します アニメーション名を grad4anime と指定します #div1 > span:nth-child(4) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); animation: grad4anime 10s linear 0s infinite normal; -webkit-animation: grad4anime 10s linear 0s infinite normal; 4
5 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして水 色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青 色 (#0000FF) に指定します アニメーション名を grad5anime と指定します #div1 > span:nth-child(5) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); animation: grad5anime 10s linear 0s infinite normal; -webkit-animation: grad5anime 10s linear 0s infinite normal; 6 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして青 色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫 色 (#FF00FF) に指定します アニメーション名を grad6anime と指定します #div1 > span:nth-child(6) { background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); animation: grad6anime 10s linear 0s infinite normal; -webkit-animation: grad6anime 10s linear 0s infinite normal; #text1 ボックスを記述します top は 0px left は 0px で width は 550px height は 520px にします テキスト文字を #div1 ボックスの中央に置きたいので 横方向は text-align: center; で中央に指定し 縦方向は span 要素のパディングを padding-top: 30px; で指定しています ( そのため height は 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 仕様にも取り込んでほしい機能です ) #text1 { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているので ボックスも下方向に 30px はみ出す為 height を 30px 減らしている */ 5
padding-top: 30px; text-align: center; font: bold 96px "MS P ゴシック ", 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; アニメーション名 grad1anime から grad6anime に対応するタイムライン (@keyframes) を指定します タイムラインを6 分割 ( グラデーションの span の数 ) し grad1anime は6 分割の1 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 次に grad2anime は6 分割の2 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 同じように grad3anime から grad6anime も 6 分割の3 番目の時間から6 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします grad1anime と grad6anime は他タイムラインと少し違うところがあります grad1anime は タイムラインの6 番目の時間にも opacity: 1.0; にして 徐々に見えるようにします grad6anime は タイムラインの6 番目の時間を opacity: 0.0; にして 徐々に見えなくなるようにします これであたかもレインボーカラーが永久に繰り返すように見えます /* 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; 6
/* 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; /* 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; 7
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; 34% { opacity: 0.0; 51% { opacity: 0.0; 68% { opacity: 0.0; 84% { opacity: 1.0; to { opacity: 0.0; 8
サンプル CSS2 テキストの背景を円形グラデーションにして変化させる (2) (webkit 仕様 ) (W3C 仕様 ) ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが W3C 仕様には同様の機能がないので webkit 系以外のブラウザ (Firefox IE など ) はテキストの色を color プロパティで指定するだけになります 背景の円形グラデーションをアニメーションのように見せる方法は opacity プロパティを利用する方法です RadialGradAndTextAnime3 の説明 HTML の記述 (RadialGradAndTextAnime3.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を6つ記述します id 属性 text1 の div 要素の中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>radialgradandtextanime3</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="radialgradandtextanime3.css"> </head> <body> <p> 背景を円形グラデーションでアニメーションさせる (3)</p> 9
<div id="stage"> <div id="div1"> <span></span><span></span><span></span><span></span><span></span><span></span> </div> <div id="text1">abc<br>defghij<br>klmnopq<br>rstuvw<br>xyz</div> </div> </body> </html> CSS の記述 (RadialGradAndTextAnime3.css) #stage ステージのスタイルを指定します #stage ステージは width: 550px; height: 550px; を指定します #stage { width: 550px; height: 550px; position: relative; #div1 ボックスを記述します width は 550px height は 550px にします border-radius: 50%; と指定して円形にします #div1 { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; position: absolute; #div1 ボックスの子要素の1 番目の span 要素を記述します top は 0px left は 0px で width は 550px height は 530px にします border-radius: 50%; と指定して円形にします span 要素の background-image プロパティを radial-gradient( ) 関数を使用して farthest-corner at 50% 50%(webkit 系ブラウザは 50% 50%, farthest-corner) で span 要素の中心から4 隅の角に向かって紫色 (#FF00FF) 青色 (#0000FF) 水色(#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) に指定します opacity: 0.0; と指定して 見えないようにしておきます アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します 10
#div1 > span:nth-child(1) { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: black; background-image: radial-gradient(farthest-side at 50% 50%, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); background-image: -webkit-radial-gradient(50% 50%, farthest-side, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); position: absolute; opacity: 0.0; animation: grad1anime 10s linear 0s infinite normal; -webkit-animation: grad1anime 10s linear 0s infinite normal; #div1 ボックスの子要素の2 番目から6 番目の span 要素は 1 番目の span 要素と background-image プロパティのグラデーションの色の順番とアニメーション名だけが違います 2 番目の span 要素を記述します グラデーションの色の順番は 1つ分ずらして赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色(#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) に指定します アニメーション名を grad2anime と指定します #div1 > span:nth-child(2) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); animation: grad2anime 10s linear 0s infinite normal; -webkit-animation: grad2anime 10s linear 0s infinite normal; 3 番目の span 要素を記述します グラデーションの色の順番はさらに 1 つ分ずらして黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) に指定します アニメーション名を grad3anime と指定します #div1 > span:nth-child(3) { background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); 11
background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); animation: grad3anime 10s linear 0s infinite normal; -webkit-animation: grad3anime 10s linear 0s infinite normal; 4 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして緑 色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水 色 (#00FFFF) に指定します アニメーション名を grad4anime と指定します #div1 > span:nth-child(4) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); animation: grad4anime 10s linear 0s infinite normal; -webkit-animation: grad4anime 10s linear 0s infinite normal; 5 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして水 色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青 色 (#0000FF) に指定します アニメーション名を grad5anime と指定します #div1 > span:nth-child(5) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); animation: grad5anime 10s linear 0s infinite normal; -webkit-animation: grad5anime 10s linear 0s infinite normal; 6 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして青 色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫 12
色 (#FF00FF) に指定します アニメーション名を grad6anime と指定します #div1 > span:nth-child(6) { background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); animation: grad6anime 10s linear 0s infinite normal; -webkit-animation: grad6anime 10s linear 0s infinite normal; #text1 ボックスを記述します top は 0px left は 0px で width は 550px height は 520px にします テキスト文字を # text1 ボックスの中央に置きたいので padding-top: 30px; を指定しています ( そのため height は 30px 減らして # text1 ボックスに収まるようにしています )-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 仕様にも取り込んでほしい機能です ) #text1 { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているので ボックスも下方向に 30px はみ出す為 height を 30px 減らしている */ padding-top: 30px; text-align: center; font: bold 96px "MS P ゴシック ", 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; アニメーション名 grad1anime から grad6anime に対応するタイムライン (@keyframes) を 13
指定します タイムラインを6 分割 ( グラデーションの span の数 ) し grad1anime は6 分割の1 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 次に grad2anime は6 分割の2 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 同じように grad3anime から grad6anime も 6 分割の3 番目の時間から6 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします grad1anime と grad6anime は他タイムラインと少し違うところがあります grad1anime は タイムラインの6 番目の時間にも opacity: 1.0; にして 徐々に見えるようにします grad6anime は タイムラインの6 番目の時間を opacity: 0.0; にして 徐々に見えなくなるようにします これであたかもレインボーカラーが永久に繰り返すように見えます /* 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; 14
/* 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; /* 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; 15
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; 34% { opacity: 0.0; 51% { opacity: 0.0; 68% { opacity: 0.0; 84% { opacity: 1.0; to { opacity: 0.0; サンプル CSS3 テキスト文字の中に背景の円形グラデーションを抜き出して変化させる (1) 注意 :Chrome Safari Microsoft Edge だけの機能です (2016 年 4 月 24 日現在 ) (webkit 仕様 ) (W3C 仕様 ) 16
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 文字の形に合わせて背景を抜き出すことができますが 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) 背景の線形グラデーションをアニメーションのように見せる方法は opacity プロパティを 利用する方法です RadialGradInTextAnime1 の説明 HTML の記述 (RadialGradInTextAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を6つ記述し それぞれの span 要素は 中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>radialgradintextanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="radialgradintextanime1.css"> </head> <body> <p> 文字の内容を 円形グラデーションでアニメーションさせる (1)</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> 17
<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> CSS の記述 (RadialGradInTextAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 450px; height: 550px; を指定します #stage { width: 450px; height: 550px; position: relative; #div1 ボックスを記述します width は 550px height は 550px にします background-color: black; を指定します #div1 { top: 0px; left: 0px; width: 550px; height: 550px; background-color: black; position: absolute; #div1 ボックスの子要素の 1 番目の span 要素を記述します top は 0px left は 0px で width は 420px height は 520px にします テキスト文字を #div1 ボックスの中央に置きた いので span 要素のパディングを padding: 30px 0px 0px 30px; で指定しています ( その ため width と height は 30px ずつ減らして #div1 ボックスに収まるようにしています ) span 要素の background-image プロパティを repeating-linear-gradient( ) 関数を使用し て上から下へ紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) に指定します -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 18
-color: transparent; background-clip: text; を指定していますが 実際には機能しません W3C 仕様にも取り込んでほしい機能です ) アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(1) { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているため グラデーションも 30px 下にずれる それを防ぐ為 height を 550px ではなく 520px で指定し グラデーションの中心を合わせている */ background-color: white; background-image: radial-gradient(farthest-corner at 50% 50%, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); padding-top: 30px; text-align: center; font: bold 96px "MS P ゴシック ", 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; animation: grad1anime 10s linear 0s infinite normal; -webkit-animation: grad1anime 10s linear 0s infinite normal; #div1 ボックスの子要素の2 番目から6 番目の span 要素は 1 番目の span 要素と background-image プロパティのグラデーションの色の順番とアニメーション名だけが違います 2 番目の span 要素を記述します グラデーションの色の順番は 1つ分ずらして赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色(#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) に指定します アニメーション名を grad2anime と指定します 19
#div1 > span:nth-child(2) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); animation: grad2anime 10s linear 0s infinite normal; -webkit-animation: grad2anime 10s linear 0s infinite normal; 3 番目の span 要素を記述します グラデーションの色の順番はさらに 1 つ分ずらして黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) に指定します アニメーション名を grad3anime と指定します #div1 > span:nth-child(3) { background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); animation: grad3anime 10s linear 0s infinite normal; -webkit-animation: grad3anime 10s linear 0s infinite normal; 4 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして緑 色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水 色 (#00FFFF) に指定します アニメーション名を grad4anime と指定します #div1 > span:nth-child(4) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); animation: grad4anime 10s linear 0s infinite normal; -webkit-animation: grad4anime 10s linear 0s infinite normal; 20
5 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして水 色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青 色 (#0000FF) に指定します アニメーション名を grad5anime と指定します #div1 > span:nth-child(5) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); animation: grad5anime 10s linear 0s infinite normal; -webkit-animation: grad5anime 10s linear 0s infinite normal; 6 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして青 色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫 色 (#FF00FF) に指定します アニメーション名を grad6anime と指定します #div1 > span:nth-child(6) { background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); animation: grad6anime 10s linear 0s infinite normal; -webkit-animation: grad6anime 10s linear 0s infinite normal; アニメーション名 grad1anime から grad6anime に対応するタイムライン (@keyframes) を 指定します タイムラインを 6 分割 ( グラデーションの span の数 ) し grad1anime は 6 分 割の 1 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 次に grad2anime は 6 分割の 2 番目の時間で opacity: 1.0; にしてグラデーションが見えるよう にします 同じように grad3anime から grad6anime も 6 分割の 3 番目の時間から 6 番目 の時間で opacity: 1.0; にしてグラデーションが見えるようにします grad1anime と grad6anime は他タイムラインと少し違うところがあります grad1anime は タイムラインの 6 番目の時間にも opacity: 1.0; にして 徐々に見えるようにします grad6anime は タイムラインの 6 番目の時間を opacity: 0.0; にして 徐々に見えなくな るようにします これでテキスト文字の中に あたかもレインボーカラーが永久に繰り返 21
すように見えます ( 注 : タイムラインを7 分割にしたり opacity の値を変えるタイミングをいろいろ試してみましたが 100% から 0% に戻るときにグラデーションが一瞬止まったりして 滑らかにグラデーションが変化しなかったので 上で記述した方法が比較的良いようです ) /* 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; 22
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; /* 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; 23
/* 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; 34% { opacity: 0.0; 51% { opacity: 0.0; 68% { opacity: 0.0; 84% { opacity: 1.0; to { opacity: 0.0; サンプル CSS4 テキスト文字の中に背景の円形グラデーションを抜き出して変化させる (2) 注意 :Chrome Safari Microsoft Edge だけの機能です (2016 年 4 月 24 日現在 ) (webkit 仕様 ) (W3C 仕様 ) 24
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 文字の形に合わせて背景を抜き出すことができますが 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) 背景の線形グラデーションをアニメーションのように見せる方法は opacity プロパティを 利用する方法です RadialGradInTextAnime4 の説明 HTML の記述 (RadialGradInTextAnime4.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を6つ記述し それぞれの span 要素は 中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>radialgradintextanime4</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="radialgradintextanime4.css"> </head> <body> <p> 文字の内容を 円形グラデーションでアニメーションさせる (4)</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> 25
<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> CSS の記述 (RadialGradInTextAnime4.css) #stage ステージのスタイルを指定します #stage ステージは width: 550px; height: 550px; を指定します #stage { width: 550px; height: 550px; position: relative; #div1 ボックスを記述します width は 550px height は 550px にします border-radius: 50%; と指定して円形にします background-color: black; を指定します #div1 { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: black; position: absolute; #div1 ボックスの子要素の 1 番目の span 要素を記述します top は 0px left は 0px で width は 550px height は 530px にします border-radius: 50%; と指定して円形にします テキスト文字を #div1 ボックスの中央に置きたいので span 要素のパディングを padding-top: 30px; で指定しています ( そのため height を 30px 減らして #div1 ボッ クスの中央に収まるようにしています ) span 要素の background-image プロパティを repeating-linear-gradient( ) 関数を使用し て上から下へ紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) に指定します -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #000000; -webkit-text -fill-color: transparent; で文字を透明にして描き -webkit-background-clip: text; を 指定して文字の部分に背景のグラデーションを抜き出して表示させ #div1 ボックスに重ね 26
ます ( これは Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) だけの機能です 下の CSS には text-stroke-width: 0px; text-stroke-color: #000000; text-fill -color: transparent; background-clip: text; を指定していますが 実際には機能しません W3C 仕様にも取り込んでほしい機能です ) アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 > span:nth-child(1) { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているため グラデーション 30px 下にずれる それを防ぐ為 height を 550px ではなく 520px で指定し グラデーションの中心を合わせている */ border-radius: 50%; background-color: white; background-image: linear-gradient(to bottom, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); background-image: -webkit-linear-gradient(top, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); padding-top: 30px; text-align: center; font: bold 96px "MS P ゴシック ", 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; animation: grad1anime 10s linear 0s infinite normal; -webkit-animation: grad1anime 10s linear 0s infinite normal; #div1 ボックスの子要素の2 番目から6 番目の span 要素は 1 番目の span 要素と background-image プロパティのグラデーションの色の順番とアニメーション名だけが違います 2 番目の span 要素を記述します グラデーションの色の順番は 1つ分ずらして赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色(#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) に指定します アニメーション名を grad2anime と指定します 27
#div1 > span:nth-child(2) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00); animation: grad2anime 10s linear 0s infinite normal; -webkit-animation: grad2anime 10s linear 0s infinite normal; 3 番目の span 要素を記述します グラデーションの色の順番はさらに 1 つ分ずらして黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) に指定します アニメーション名を grad3anime と指定します #div1 > span:nth-child(3) { background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00); animation: grad3anime 10s linear 0s infinite normal; -webkit-animation: grad3anime 10s linear 0s infinite normal; 4 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして緑 色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水 色 (#00FFFF) に指定します アニメーション名を grad4anime と指定します #div1 > span:nth-child(4) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF); animation: grad4anime 10s linear 0s infinite normal; -webkit-animation: grad4anime 10s linear 0s infinite normal; 28
5 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして水 色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青 色 (#0000FF) に指定します アニメーション名を grad5anime と指定します #div1 > span:nth-child(5) { background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF); animation: grad5anime 10s linear 0s infinite normal; -webkit-animation: grad5anime 10s linear 0s infinite normal; 6 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして青 色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫 色 (#FF00FF) に指定します アニメーション名を grad6anime と指定します #div1 > span:nth-child(6) { background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF); animation: grad6anime 10s linear 0s infinite normal; -webkit-animation: grad6anime 10s linear 0s infinite normal; アニメーション名 grad1anime から grad6anime に対応するタイムライン (@keyframes) を 指定します タイムラインを 6 分割 ( グラデーションの span の数 ) し grad1anime は 6 分 割の 1 番目の時間で opacity: 1.0; にしてグラデーションが見えるようにします 次に grad2anime は 6 分割の 2 番目の時間で opacity: 1.0; にしてグラデーションが見えるよう にします 同じように grad3anime から grad6anime も 6 分割の 3 番目の時間から 6 番目 の時間で opacity: 1.0; にしてグラデーションが見えるようにします grad1anime と grad6anime は他タイムラインと少し違うところがあります grad1anime は タイムラインの 6 番目の時間にも opacity: 1.0; にして 徐々に見えるようにします grad6anime は タイムラインの 6 番目の時間を opacity: 0.0; にして 徐々に見えなくな 29
るようにします これでテキスト文字の中に あたかもレインボーカラーが永久に繰り返 すように見えます /* 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; 30
@-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; /* 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; 31
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; 34% { opacity: 0.0; 51% { opacity: 0.0; 68% { opacity: 0.0; 84% { opacity: 1.0; to { opacity: 0.0; 32