サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中にテキストで Out

(1)

1339 アウトラインのアニメーション

outline は入力フィールドの輪郭を赤くして目立たせるなど、ユーザーインターフェースと

して使用されることが多い機能です。また outline でボックスの輪郭をアニメーションさ

せることもできますが、あまり使われることはないかもしれません。

アニメーションで変化させることができる outline 関係のプロパティ。

○ outline-color ・・・ animation で色を滑らかに変化させることができます。

○ outline-width ・・・ animation で幅を滑らかに変化させることができます。

× outline-style ・・・ animation でスタイルを滑らかに変化させることができ

ません。

（瞬時に切り替わります。

）

（注）outline 関係のプロパティには border と違い outline-radius と outline-image は

ありません。

outline-style を animation で滑らかに変化するように見せるためには、トリッキーな方法

を使います。その方法も含めて、outline 関係プロパティの animation を紹介します。

〔通常の outline の使い方〕

outline の通常の使い方は、下の画面のように<input>や<textarea>などの入力フィール

ドをクリックしてフォーカスが入力フィールドに移った時に、輪郭を赤くしたりして目立

たせます。よく見かける画面でしょう。これらの入力フィールドの輪郭をアニメーション

で変化させることは難しいようです。

ここでは div 要素のボックスの輪郭をアニメーションで変化させてみることにします。

(2)

【OutlineAnimation.html の説明】

〔HTML の記述（OutlineAnimation.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 div1 の div 要素を記述し、中にテキストで Outline Color と記述します。

&nbsp

は半角スペースになります。

id 属性 div2 の div 要素を記述し、中にテキストで Outline Width と記述します。

id 属性 div3 の div 要素を記述し、中にテキストで Outline All<br />(Color,Width)

と記述します。テキストの間に入っている<br />は改行させるタグです。

id 属性 div4 の div 要素の中に<span>タグで span 要素を６つ記述します（span 要素を使用

して５種類のボーダースタイルを切り替えるためです）

。６つ目の span 要素とその中にテ

キストで Outline Style<br />(tricky)と記述します。

〔CSS の記述（OutlineAnimation.css）

〕

先ず、ボックスを描画するための#stage の記述をします。

サンプルＣＳＳ

#stage { margin: 10px 0px 0px 10px; width: 700px; height: 550px; border: solid 1px black; position: relative; } <!DOCTYPE html> <html> <head> <title>OutlineAnimation</title> <meta charset="UTF-8">

<div id="div3">Outline All<br />(Color,Width)</div> <div id="div4"><span></span><span></span><span></span> <span></span><span></span> <span>Outline Style<br />(tricky)</span></div> </div> </body> </html>

(3)

次に各種アウトラインを変化させる記述をします。

1.outline-color のアニメーション

ボーダーの色を animation で変化させてみましょう。

#div1 ボックスは outline-color を yellow → yellowgreen → green → orange →

yellow の順に繰り返し変化するようにしました。

#div1 ボックスは、position は absolute、位置は top を 40px、left を 40px（#stage ボッ

クスの左上端を起点とした位置）

、width は 280px、height は 80px にします。アウトライン

は幅を 10px 、色を黄色 yellow 、種類を solid で指定します。背景色はグレー

background-color: #CCCCCC;で指定します。テキストは左右中央 text-align: center;で、

フォントは font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;

で、テキストが上下中央の位置に来るように line-height: 80px;で、テキストの色は color:

black;（黒色）で指定します。

アニメーション名を style1Anime、実行時間を 5s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

/* Outline Color **********************************************************/ #div1 { top: 40px; left: 40px; width: 280px; height: 80px; outline: solid 10px yellow; background-color: #CCCCCC; text-align: center;

font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 80px;

color: black; position: absolute;

animation: style1Anime 5s linear 0s infinite normal;

-webkit-animation: style1Anime 5s linear 0s infinite normal; }

(4)

アニメーション名 style1Anime に対応するタイムライン（@keyframes）を指定します。

outline-color を yellow → yellowgreen → green → orange → yellow の順に繰り返し

変化するようにします。

2.outline-width のアニメーション

アウトラインの幅を animation で変化させてみましょう。

#div2 ボックスは outline-width を 10px → 30px → 10px に繰り返し変化するようにしま

した。

#div2 ボックスは、position は absolute、位置は top を 40px、left を 370px（#stage ボッ

クスの左上端を起点とした位置）

、width は 280px、height は 80px にします。アウトライン

は幅を 10px、色を濃いスカイブルーdeepskyblue、種類を solid で指定します。背景色はグ

レーbackground-color: #CCCCCC;で指定します。テキストは左右中央 text-align: center;

で、フォントは font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;

で、テキストが上下中央の位置に来るように line-height: 80px;で、テキストの色は color:

black;（黒色）で指定します。

アニメーション名を style2Anime、実行時間を 5s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

@keyframes style1Anime {

from { outline-color: yellow; } 10% { outline-color: yellow; } 40% { outline-color: yellowgreen; } 60% { outline-color: green; } 85% { outline-color: orange; } to { outline-color: yellow; } } @-webkit-keyframes style1Anime { from { outline-color: yellow; } 10% { outline-color: yellow; } 40% { outline-color: yellowgreen; } 60% { outline-color: green; } 85% { outline-color: orange; } to { outline-color: yellow; } }

(5)

アニメーション名 style2Anime に対応するタイムライン（@keyframes）を指定します。

outline-width を 10px から 30px に変化するようにします。

前章のボーダーのアニメーションで border-width を変化させたアニメーションでは#div2

span ボックスの位置を top: 0px; left: 0px;から top: -20px; left: -20px;に変化させて

いるのは、ボーダーの幅が増えた分だけ content（グレーの部分）の位置がずれるのを防ぐ

ためでした。

アウトラインの場合はアウトラインの幅が増えても content（グレーの部分）の位置はずれ

ないので、直接#div2 要素のアウトラインの幅を増やしていて、top と left は変化させる

必要はありません。

/* Outline Width **********************************************************/ #div2 {

top: 40px; left: 370px; width: 280px; height: 80px; outline: solid 10px deepskyblue; background-color: #CCCCCC; text-align: center;

animation: style2Anime 5s linear 0s infinite alternate;

-webkit-animation: style2Anime 5s linear 0s infinite alternate; } @keyframes style2Anime { from { outline-width: 10px; } to { outline-width: 30px; } } @-webkit-keyframes style2Anime { from { outline-width: 10px; } to { outline-width: 30px; } }

(6)

3.outline-color、outline-width の複合アニメーション

アウトラインの色と幅を同時に animation で変化させてみましょう。

#div3 ボックスは、position は absolute、位置は top を 180px、left を 40px（#stage ボッ

クスの左上端を起点とした位置）

、width は 280px、height は 80px にします。アウトライン

は幅を 10px、色を緑色 green、種類を solid で指定します。背景色はグレーbackground-

color: #CCCCCC;で指定します。テキストは左右中央 text-align: center;で、フォントは

font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;で、テキス

トが上下中央の位置に来るように line-height: 40px;で、テキストの色は color: black;

（黒色）で指定します。

ここでは、outline-color、outline-width、outline-style を個別に指定しています。

アニメーション名を style3Anime、実行時間を 12s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 style4Anime に対応するタイムライン（@keyframes）を指定します。

outline-color を green → blue → violet → red → green に、

outline-width を 10px →

20px → 30px → 20px → 10px に同時に変化し繰り返すようにしました。

/* Outline All (Color,Width) ***********************************************/ #div3 {

top: 180px; left: 40px; width: 280px; height: 80px;

outline-style: solid; outline-width: 10px; outline-color: green; background-color: #CCCCCC;

text-align: center;

animation: style3Anime 12s linear 0s infinite normal;

-webkit-animation: style3Anime 12s linear 0s infinite normal; }

(7)

4.outline-style の連続アニメーション

アウトラインスタイルを連続して変化させてみましょう。W3C 仕様では outline-style は

アニメーションさせることができません。outline-style を animation で変化させようとし

ても、よく動きを見ると outline-style はすぐに切り替わっていることがわかります。で

すから連続して変化するように見せるためには次のようなトリッキーな方法を使った一工

夫が必要です。

#div4 ボックスは、position は absolute、位置は top を 180px、left を 370px（#stage ボ

ックスの左上端を起点とした位置）

、width は 280px、height は 80px にします。ボーダーは

幅を 10px 、色を緑色 lightgreen 、種類を solid で指定します。背景色はグレー

background-color: #CCCCCC;で指定します。子要素として span 要素を６つ記述します。

１つ目から５つ目の span 要素は、position は absolute、位置は top を 0px、left を 0px

（#div4 ボックスの左上端を起点とした位置）

、width は 280px、height は 80px にします。

opacity: 0.0;と指定して見えないようにしておきます。

アニメーションは実行時間を 15s、

@keyframes style3Anime {

from { outline-color: green; outline-width: 10px; } 25% { outline-color: blue; outline-width: 20px; } 50% { outline-color: violet; outline-width: 30px; } 75% { outline-color: red; outline-width: 20px; } to { outline-color: green; outline-width: 10px; } }

@-webkit-keyframes style3Anime {

from { outline-color: green; outline-width: 10px; } 25% { outline-color: blue; outline-width: 20px; } 50% { outline-color: violet; outline-width: 30px; } 75% { outline-color: red; outline-width: 20px; } to { outline-color: green; outline-width: 10px; } }

(8)

イージングを linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は normal で指

定します。つぎの項目は span 要素ごとに違います。

〔span 要素〕〔ボーダーの指定〕〔アニメーション名〕

１つ目の span 要素 outline: groove 10px aqua; style4Anime1

２つ目の span 要素 outline: double 10px forestgreen; style4Anime2

３つ目の span 要素 outline: dotted 10px crimson; style4Anime3

４つ目の span 要素 outline: inset 10px skyblue; style4Anime4

５つ目の span 要素 outline: dashed 10px dimgray; style4Anime5

６つ目の span 要素は、position は absolute、位置は top を 0px、left を 0px（#div4 ボッ

クスの左上端を起点とした位置）

、width は 280px、height は 80px にします。ボーダーは指

定しません。背景色は指定しません。テキストは左右中央 text-align: center;で、フォン

トは font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;で、テ

キストが上下中央の位置に来るように line-height: 40px;で、テキストの色は color:

black;（黒色）で指定します。

/* Outline Style (tricky) *********************************************/ /* 注：「outline-style」はアニメーションできないので、opacity を利用します。 */ #div4 {

top: 180px; left: 370px; width: 280px; height: 80px; outline: solid 10px lightgreen; background-color: #CCCCCC; position: absolute; } #div4 > span:nth-child(1) { top: 0px; left: 0px; width: 280px; height: 80px; outline: groove 10px aqua; opacity: 0.0;

position: absolute;

animation: style4Anime1 15s linear 0s infinite normal;

-webkit-animation: style4Anime1 15s linear 0s infinite normal; }

#div4 > span:nth-child(2) { top: 0px; left: 0px; width: 280px; height: 80px; outline: double 10px forestgreen; opacity: 0.0;

position: absolute;

(9)

アニメーション名 style4Anime1 から style4Anime5 に対応するタイムライン（@keyframes）

を指定します。１つ目から５つ目の span 要素に違う種類の outline-style を指定してある

ので、それを１秒毎に opacity プロパティを利用して次々と見えるようにして、まるでボ

ーダーの種類が少しずつ変化するように見せています。

#div4 > span:nth-child(3) { top: 0px; left: 0px; width: 280px; height: 80px; outline: dotted 10px crimson; opacity: 0.0;

position: absolute;

#div4 > span:nth-child(4) { top: 0px; left: 0px; width: 280px; height: 80px; outline: inset 10px skyblue; opacity: 0.0;

position: absolute;

#div4 > span:nth-child(5) { top: 0px; left: 0px; width: 280px; height: 80px; outline: dashed 10px dimgray; opacity: 0.0;

position: absolute;

#div4 > span:nth-child(6) { top: 0px; left: 0px; width: 280px; height: 80px; text-align: center;

color: black; position: absolute; }

(10)

© 2016 電脳 Papa 10 @keyframes style4Anime1 { from { opacity: 0.0; } 15% { opacity: 1.0; } 20% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes style4Anime1 { from { opacity: 0.0; } 15% { opacity: 1.0; } 20% { opacity: 0.0; } to { opacity: 0.0; } } @keyframes style4Anime2 { from { opacity: 0.0; } 15% { opacity: 0.0; } 20% { opacity: 1.0; } 35% { opacity: 1.0; } 40% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes style4Anime2 { from { opacity: 0.0; } 15% { opacity: 0.0; } 20% { opacity: 1.0; } 35% { opacity: 1.0; } 40% { opacity: 0.0; } to { opacity: 0.0; } } @keyframes style4Anime3 { from { opacity: 0.0; } 35% { opacity: 0.0; } 40% { opacity: 1.0; } 55% { opacity: 1.0; } 60% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes style4Anime3 { from { opacity: 0.0; } 35% { opacity: 0.0; } 40% { opacity: 1.0; } 55% { opacity: 1.0; } 60% { opacity: 0.0; } to { opacity: 0.0; } } @keyframes style4Anime4 { from { opacity: 0.0; } 55% { opacity: 0.0; } 60% { opacity: 1.0; }

(11)

© 2016 電脳 Papa 11 75% { opacity: 1.0; } 80% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes style4Anime4 { from { opacity: 0.0; } 55% { opacity: 0.0; } 60% { opacity: 1.0; } 75% { opacity: 1.0; } 80% { opacity: 0.0; } to { opacity: 0.0; } } @keyframes style4Anime5 { from { opacity: 0.0; } 75% { opacity: 0.0; } 80% { opacity: 1.0; } 95% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes style4Anime5 { from { opacity: 0.0; } 75% { opacity: 0.0; } 80% { opacity: 1.0; } 95% { opacity: 1.0; } to { opacity: 0.0; } }

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

1339 アウトラインのアニメーション

outline は入力フィールドの輪郭を赤くして目立たせるなど、ユーザーインターフェースと

して使用されることが多い機能です。また outline でボックスの輪郭をアニメーションさ

せることもできますが、あまり使われることはないかもしれません。

アニメーションで変化させることができる outline 関係のプロパティ。

○ outline-color ・・・ animation で色を滑らかに変化させることができます。

○ outline-width ・・・ animation で幅を滑らかに変化させることができます。

× outline-style ・・・ animation でスタイルを滑らかに変化させることができ

ません。

（瞬時に切り替わります。

）

（注）outline 関係のプロパティには border と違い outline-radius と outline-image は

ありません。

outline-style を animation で滑らかに変化するように見せるためには、トリッキーな方法

を使います。その方法も含めて、outline 関係プロパティの animation を紹介します。

〔通常の outline の使い方〕

outline の通常の使い方は、下の画面のように<input>や<textarea>などの入力フィール

ドをクリックしてフォーカスが入力フィールドに移った時に、輪郭を赤くしたりして目立

たせます。よく見かける画面でしょう。これらの入力フィールドの輪郭をアニメーション

で変化させることは難しいようです。

ここでは div 要素のボックスの輪郭をアニメーションで変化させてみることにします。

【OutlineAnimation.html の説明】

〔HTML の記述 （OutlineAnimation.html）

〕

id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。

id 属性 div1 の div 要素を記述し、中にテキストで Outline&nbsp;Color と記述します。

&nbsp

は半角スペースになります。

id 属性 div2 の div 要素を記述し、中にテキストで Outline&nbsp;Width と記述します。

id 属性 div3 の div 要素を記述し、中にテキストで Outline&nbsp;All<br />(Color,Width)

と記述します。テキストの間に入っている<br />は改行させるタグです。

id 属性 div4 の div 要素の中に<span>タグで span 要素を６つ記述します（span 要素を使用

して５種類のボーダースタイルを切り替えるためです）

。６つ目の span 要素とその中にテ

キストで Outline&nbsp;Style<br />(tricky)と記述します。

〔CSS の記述（OutlineAnimation.css）

〕

先ず、ボックスを描画するための#stage の記述をします。

サンプルＣＳＳ

次に各種アウトラインを変化させる記述をします。

1.outline-color のアニメーション

ボーダーの色を animation で変化させてみましょう。

#div1 ボ ッ ク ス は outline-color を yellow → yellowgreen → green → orange →

yellow の順に繰り返し変化するようにしました。

#div1 ボックスは、position は absolute、位置は top を 40px、left を 40px（#stage ボッ

クスの左上端を起点とした位置）

、width は 280px、height は 80px にします。アウトライン

は 幅 を 10px 、 色 を 黄 色 yellow 、 種 類 を solid で 指 定 し ま す 。 背 景 色 は グ レ ー

background-color: #CCCCCC;で指定します。テキストは左右中央 text-align: center;で、

フォントは font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;

で、テキストが上下中央の位置に来るように line-height: 80px;で、テキストの色は color:

black;（黒色）で指定します。

アニメーション名を style1Anime、実行時間を 5s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 style1Anime に対応するタイムライン（@keyframes）を指定します。

outline-color を yellow → yellowgreen → green → orange → yellow の順に繰り返し

変化するようにします。

2.outline-width のアニメーション

アウトラインの幅を animation で変化させてみましょう。

#div2 ボックスは outline-width を 10px → 30px → 10px に繰り返し変化するようにしま

した。

#div2 ボックスは、position は absolute、位置は top を 40px、left を 370px（#stage ボッ

クスの左上端を起点とした位置）

、width は 280px、height は 80px にします。アウトライン

は幅を 10px、色を濃いスカイブルーdeepskyblue、種類を solid で指定します。背景色はグ

レーbackground-color: #CCCCCC;で指定します。テキストは左右中央 text-align: center;

で、フォントは font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;

で、テキストが上下中央の位置に来るように line-height: 80px;で、テキストの色は color:

black;（黒色）で指定します。

アニメーション名を style2Anime、実行時間を 5s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

アニメーション名 style2Anime に対応するタイムライン（@keyframes）を指定します。

outline-width を 10px から 30px に変化するようにします。

前章のボーダーのアニメーションで border-width を変化させたアニメーションでは#div2

span ボックスの位置を top: 0px; left: 0px;から top: -20px; left: -20px;に変化させて

いるのは、ボーダーの幅が増えた分だけ content（グレーの部分）の位置がずれるのを防ぐ

ためでした。

アウトラインの場合はアウトラインの幅が増えても content（グレーの部分）の位置はずれ

ないので、直接#div2 要素のアウトラインの幅を増やしていて、top と left は変化させる

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し中にテキストで Out

〔HTML の記述（OutlineAnimation.html）

id 属性 div1 の div 要素を記述し、中にテキストで Outline Color と記述します。

id 属性 div2 の div 要素を記述し、中にテキストで Outline Width と記述します。

id 属性 div3 の div 要素を記述し、中にテキストで Outline All<br />(Color,Width)

キストで Outline Style<br />(tricky)と記述します。

#div1 ボックスは outline-color を yellow → yellowgreen → green → orange →

は幅を 10px 、色を黄色 yellow 、種類を solid で指定します。背景色はグレー

フォントは font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;

で、フォントは font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;

font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;で、テキス

幅を 10px 、色を緑色 lightgreen 、種類を solid で指定します。背景色はグレー

〔span 要素〕〔ボーダーの指定〕〔アニメーション名〕

トは font: bold 32px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;で、テ