1329-2 Linear Gradation のアニメーション (2) 背景 (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) を参照してください サンプル CSS1 テキストの背景をグラデーションにして変化させる (1) (webkit 仕様 ) (W3C 仕様 ) 1
背景の線形グラデーションをアニメーションのように見せる方法は 前章の #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 要素を2つ記述します 1つ目の span 要素は span 要素を移動させてグラデーションが動くように見せます 1つ目の span 要素は 中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>lineargradslideanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lineargradslideanime1.css"> </head> <body> <p> 背景をグラデーションのスライドでアニメーションさせる (1)</p> <div id="stage"> <div id="div1"> <span></span> </div> </div> </body> </html> CSS の記述 (LinearGradSlideAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 450px; height: 550px; border: solid 1px black; を指定します 2
#stage { width: 450px; height: 550px; border: solid 1px black; position: relative; #div1 ボックスを記述します width は 450px height は 550px にします overflow: hidden; を指定します #div1 { top:0px; left: 0px; width: 450px; height: 550px; position: absolute; overflow: hidden; #div1 ボックスの子要素の1つ目の span 要素を記述します top は-550px left は 0px で width は 450px height は 1100px にします span 要素の background プロパティを repeating-linear-gradient( ) 関数を使用して上から下へレインボーカラーのグラデーションを2 回繰り返すように指定します アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #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; #div1 ボックスの子要素の 2 つ目の span 要素を記述します top は 0px left は 0px で width は 420px height は 520px にします テキスト文字を #div1 ボックスの中央に置きた いので padding: 30px 0px 0px 30px; を指定しています ( そのため width と height は 3
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 仕様にも取り込んでほしい機能です ) #div1>span:nth-child(2) { top: 0px; left: 0px; width: 420px; height: 520px; padding: 30px 0px 0px 30px; text-align: left; 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; アニメーション名 grad6anime に対応するタイムライン (@keyframes) を指定します この span 要素を top: -550px; から top: 0px; に移動します span 要素のグラデーションはレインボーカラーを2 回繰り返すように指定してあるので span 要素を半分移動したところでまた span 要素の先頭に戻るので あたかもレインボーカラーが永久に繰り返すように見えます @keyframes grad1anime { from { top: -550px; to { top: 0px; @-webkit-keyframes grad1anime { from { top: -550px; to { top: 0px; 4
サンプル CSS2 テキストの背景をグラデーションにして変化させる (2) (webkit 仕様 ) (W3C 仕様 ) サンプル CSS1 と同じアニメーションを background-position background-size などの プロパティを使用して動かしてみます LinearGradSlideAnime2 の説明 HTML の記述 (LinearGradSlideAnime2.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を1つ記述し 中にテキスト文字を記述します <!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> 背景のグラデーションをアニメーションさせる (2)</p> <div id="stage"> <div id="div1"> </div> </div> </body> </html> 5
CSS の記述 (LinearGradSlideAnime2.css) #stage ステージのスタイルを指定します #stage ステージは width: 450px; height: 550px; border: solid 1px black; を指定します #stage { width: 450px; height: 550px; border: solid 1px black; position: relative; #div1 ボックスを記述します top は 0px left は 0px で width は 450px height は 550px にします background-image プロパティを repeating-linear-gradient( ) 関数を使用して上から下へレインボーカラーのグラデーションを 2 回繰り返す指定をします background-size: 100% 200%; と指定し #div1 ボックスの高さの2 倍のバックグラウンドイメージにします background-position: 0% 100%; と指定し バックグラウンドイメージの下半分を #div1 ボックスに表示します アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #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; #div1 ボックスの子要素の span 要素を記述します top は 0px left は 0px で width は 6
420px height は 520px にします テキスト文字を #div1 ボックスの中央に置きたいので padding: 30px 0px 0px 30px; を指定しています ( そのため width と height は 30px ずつ 減らして #div1 ボックスに収まるようにしています ) #div1 span { top: 0px; left: 0px; width: 420px; height: 520px; padding: 30px 0px 0px 30px; text-align: left; 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 に対応するタイムライン (@keyframes) を指定します バックグラウンドイメージの background-position を background-position: 0% 100%; から background-position: 0% 0%; に移動します バックグラウンドイメージのグラデーションはレインボーカラーを2 回繰り返すように指定してあるので バックグラウンドイメージの上半分の表示が終わったところでまたバックグラウンドイメージの下半分に戻るので あたかもレインボーカラーが永久に繰り返すように見えます @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%; 7
サンプル CSS3 テキストの背景をグラデーションにして変化させる (3) (webkit 仕様 ) (W3C 仕様 ) Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) はテキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが W3C 仕様には同様の機能がないので webkit 系以外のブラウザ (Firefox IE など ) はテキストの色を color プロパティで指定するだけになります ここでは円形の背景に線形グラデーションのアニメーションを動かし その上にテキスト文字を表示します 背景の線形グラデーションをアニメーションのように見せる方法は サンプルCSS2の LinearGradSlideAnime2.css と同じ方法です ( 注 : サンプルCSS1の LinearGradSlideAnime1.css のように グラデーションで染めた子要素の span 要素を動かす方法を使用して 親要素を border-radius プロパティで円形にして overflow: hidden; を指定する (LinearGradSlideAnime3.css を参照してください ) と Safari ブラウザだけがうまくいきません Safari の場合 親要素を border-radius プロパティで円形にして overflow: hidden; を指定すると overflow: hidden; が矩形 (4 角形 ) について有効のようで グラデーションが円形にならず矩形のままになります Safari の不具合でしょうか 他のブラウザではグラデーションが円形になります ) LinearGradSlideAnime3 の説明 HTML の記述 (LinearGradSlideAnime3.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや 画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を 1 つ記述し 中にテキスト文字を 記述します 8
<!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> 背景のグラデーションをアニメーションさせる (3)</p> <div id="stage"> <div id="div1"> </div> </div> </body> </html> CSS の記述 (LinearGradSlideAnime3.css) #stage ステージのスタイルを指定します #stage ステージは width: 550px; height: 550px; を指定します #stage { width: 550px; height: 550px; position: relative; #div1 ボックスを記述します top は 0px left は 0px で width は 550px height は 550px にします border-radius: 50%; と指定して円形にします background-image プロパティを repeating-linear-gradient( ) 関数を使用して上から下へレインボーカラーのグラデーションを2 回繰り返す指定をします background-size: 100% 200%; と指定し #div1 ボックスの高さの2 倍のバックグラウンドイメージにします background-position: 0% 100%; と指定し バックグラウンドイメージの下半分を #div1 ボックスに表示します アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #div1 { top:0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: orange; 9
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; #div1 ボックスの子要素の span 要素を記述します top は 0px left は 0px で width は 550px height は 520px にします テキスト文字を #div1 ボックスの中央に置きたいので padding-top: 30px; を指定しています ( そのため height を 30px 減らして #div1 ボックスに収まるようにしています ) #div1 span { top: 0px; left: 0px; width: 550px; height: 520px; 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 に対応するタイムライン (@keyframes) を指定します バッ クグラウンドイメージの background-position を background-position: 0% 100%; から background-position: 0% 0%; に移動します バックグラウンドイメージのグラデーション はレインボーカラーを 2 回繰り返すように指定してあるので バックグラウンドイメージ の上半分の表示が終わったところでまたバックグラウンドイメージの下半分に戻るので 10
あたかもレインボーカラーが永久に繰り返すように見えます @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%; サンプル CSS4 テキスト文字の中に背景のグラデーションを抜き出して変化させる (1) 注意 :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 文字の形に合わせて 11
背景を抜き出すことができますが 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 要素を6つ記述し それぞれの span 要素は 中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>lineargradintextanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lineargradintextanime1.css"> </head> <body> <p> 文字の内容を グラデーションでアニメーションさせる (1)</p> <div id="stage"> <div id="div1"> </div> </div> </body> </html> 12
CSS の記述 (LinearGradInTextAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 450px; height: 550px; を指定します #stage { width: 450px; height: 550px; position: relative; #div1 ボックスを記述します width は 450px height は 550px にします overflow: hidden; を指定します background-color: black; を指定します #div1 { top: 0px; left: 0px; width: 450px; height: 550px; background-color: black; position: absolute; #div1 ボックスの子要素として 6 つの span 要素を記述しますが 各 span 要素に共通のプロ パティをまとめて指定します top は 0px left は 0px で width は 420px height は 520px にします グラデーションの 変化を opacity プロパティの値を変化させて行うので 値が 0 と 1 の変化の途中で #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; で指定します 13
#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 "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; 以降は 各 span 要素で異なるプロパティを指定します #div1 ボックスの子要素の1 番目の span 要素を記述します span 要素の background-image プロパティを linear-gradient( ) 関数を使用して上から下へ紫色 (#FF00FF) 青色(#0000FF) 水色 (#00FFFF) 緑色(#00FF00) 黄色(#FFFF00) 赤色(#FF0000) に指定します アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #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 ボックスの子要素の 2 番目から 6 番目の span 要素は 1 番目の span 要素と background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い ます 2 番目の span 要素を記述します グラデーションの色の順番は 1 つ分ずらして赤色 14
(#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) に指定します アニメーション名を grad2anime と指定します #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; 3 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして黄 色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑 色 (#00FF00) に指定します アニメーション名を grad2anime と指定します #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; 4 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして緑 色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水 色 (#00FFFF) に指定します アニメーション名を grad4anime と指定します #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; 5 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして水 色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青 色 (#0000FF) に指定します アニメーション名を grad5anime と指定します 15
#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; 6 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして青 色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫 色 (#FF00FF) に指定します アニメーション名を grad6anime と指定します #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 から 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; にして 徐々に見えなくなるようにします これでテキスト文字の中に あたかもレインボーカラーが永久に繰り返すように見えます ( 注 : タイムラインを7 分割にしたり opacity の値を変えるタイミングをいろいろ試してみましたが 100% から 0% に戻るときにグラデーションが一瞬止まったりして 滑らかにグラデーションが変化しなかったので 上で記述した方法が比較的良いようです ) 16
/* 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; 17
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; 18
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; サンプル CSS5 テキスト文字の中に背景のグラデーションを抜き出して変化させる (2) 注意 :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( 透明 ) を指定して 19
-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) 背景の線形グラデーションをアニメーションのように見せる方法は サンプル CSS4 の LinearGradInTextAnime1.css と同じように opacity プロパティを利用する方法です LinearGradInTextAnime5 の説明 HTML の記述 (LinearGradInTextAnime5.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 div1 の div 要素の中に <span> タグで span 要素を6つ記述し それぞれの span 要素は 中にテキスト文字を記述します <!DOCTYPE html> <html> <head> <title>lineargradintextanime5</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="lineargradintextanime5.css"> </head> <body> <p> 文字の内容を グラデーションでアニメーションさせる (5)</p> <div id="stage"> <div id="div1"> </div> </div> </body> </html> 20
CSS の記述 (LinearGradInTextAnime5.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 ボックスの子要素として 6 つの span 要素を記述しますが 各 span 要素に共通のプロ パティをまとめて指定します top は 0px left は 0px で width は 550px height は 520px にします グラデーションの 変化を opacity プロパティの値を変化させて行うので 値が 0 と 1 の変化の途中で #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 仕様にも取り込んでほしい機能です ) 21
position: absolute; で指定します opacity を opacity: 0.0; で指定します #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 "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; 以降は 各 span 要素で異なるプロパティを指定します #div1 ボックスの子要素の1 番目の span 要素を記述します span 要素の background-image プロパティを linear-gradient( ) 関数を使用して上から下へ紫色 (#FF00FF) 青色(#0000FF) 水色 (#00FFFF) 緑色(#00FF00) 黄色(#FFFF00) 赤色(#FF0000) に指定します アニメーション名を grad1anime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #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 ボックスの子要素の 2 番目から 6 番目の span 要素は 1 番目の span 要素と background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い ます 22
2 番目の span 要素を記述します グラデーションの色の順番は 1 つ分ずらして赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) に指定します アニメーション名を grad2anime と指定します #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; 3 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして黄 色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水色 (#00FFFF) 緑 色 (#00FF00) に指定します アニメーション名を grad3anime と指定します #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; 4 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして緑 色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青色 (#0000FF) 水 色 (#00FFFF) に指定します アニメーション名を grad4anime と指定します #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; 5 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして水 色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫色 (#FF00FF) 青 色 (#0000FF) に指定します アニメーション名を grad5anime と指定します 23
#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; 6 番目の span 要素を記述します グラデーションの色の順番は さらに 1 つ分ずらして青 色 (#0000FF) 水色 (#00FFFF) 緑色 (#00FF00) 黄色 (#FFFF00) 赤色 (#FF0000) 紫 色 (#FF00FF) に指定します アニメーション名を grad6anime と指定します #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 から 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; 24
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; 25
/* 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; 26
34% { opacity: 0.0; 51% { opacity: 0.0; 68% { opacity: 0.0; 84% { opacity: 1.0; to { opacity: 0.0; 27