( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

Size: px

Start display at page:

Download "( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ"

あやかふじつぐ
5 years ago
Views:

1 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにしてみましょう radial-gradient と repeating-radial-gradient の仕様は別本 Transition を使いこなす編の円形グラデーション Radial Gradation (radial-gradient) を参照してください radial-gradient( ) 関数または repeating-radial-gradient( ) 関数は background-image プロパティ ( または background プロパティで一括指定した中の background-image) の値として指定します W3C 仕様では background-image プロパティはアニメーションできないようになっているので transition プロパティや animation プロパティでアニメーションにすることができません ( グラデーションのアニメーションは多用されそうですが残念ですが現在の仕様ではできません将来仕様に取り込まれるかもしれませんが ) そこでどうしてもグラデーションのアニメーションを作りたいので別の方法であたかもアニメーションのように見せることにしますサンプル CSS1 テキストの背景を円形グラデーションにして変化させる (1) (webkit 仕様 ) (W3C 仕様 ) 1

2 ( 注 )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

3 #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

4 #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 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

6 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 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: 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

7 /* grad2anime 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: 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 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: 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 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: grad4anime { from { opacity: 0.0; 17% { opacity: 0.0; 7

8 34% { opacity: 0.0; 51% { opacity: 1.0; 68% { opacity: 1.0; 84% { opacity: 0.0; to { opacity: 0.0; /* grad5anime 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: 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 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: 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

9 サンプル 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

10 <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

11 #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

12 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

13 色 (#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

14 指定しますタイムラインを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 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: 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 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: 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

15 /* grad3anime 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: 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 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: 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 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: grad5anime { from { opacity: 0.0; 17% { opacity: 0.0; 34% { opacity: 0.0; 15

16 51% { opacity: 0.0; 68% { opacity: 1.0; 84% { opacity: 1.0; to { opacity: 0.0; /* grad6anime 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: 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

17 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

18 <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

19 -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

20 #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

21 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

22 すように見えます ( 注 : タイムラインを7 分割にしたり opacity の値を変えるタイミングをいろいろ試してみましたが 100% から 0% に戻るときにグラデーションが一瞬止まったりして滑らかにグラデーションが変化しなかったので上で記述した方法が比較的良いようです ) /* grad1anime 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: 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 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: 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 grad3anime { from { opacity: 0.0; 17% { opacity: 0.0; 34% { opacity: 1.0; 51% { opacity: 1.0; 22

23 68% { opacity: 0.0; 84% { opacity: 0.0; to { opacity: 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 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: 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 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: 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.

24 /* grad6anime 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: 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

25 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

26 <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

27 ます ( これは 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

28 #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

29 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

30 るようにしますこれでテキスト文字の中にあたかもレインボーカラーが永久に繰り返すように見えます /* grad1anime 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: 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 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: 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 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

31 @-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 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: 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 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: 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 grad6anime { from { opacity: 0.0; 17% { opacity: 0.0; 31

32 34% { opacity: 0.0; 51% { opacity: 0.0; 68% { opacity: 0.0; 84% { opacity: 1.0; to { opacity: 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

背景の線形グラデーションをアニメーションのように見せる方法は前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにしてみましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ