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 要素のボックスの輪郭をアニメーションで変化させてみることにします 1
サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Outline Color と記述します   は半角スペースになります id 属性 div2 の div 要素を記述し 中にテキストで Outline Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Outline All<br />(Color,Width) と記述します テキストの間に入っている <br /> は改行させるタグです id 属性 div4 の div 要素の中に <span> タグで span 要素を6つ記述します (span 要素を使用して5 種類のボーダースタイルを切り替えるためです ) 6つ目の span 要素とその中にテキストで Outline Style<br />(tricky) と記述します <!DOCTYPE html> <html> <head> <title>outlineanimation</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="outlineanimation.css"> </head> <body> <p> アウトラインをアニメーションで動かす </p> <div id="stage"> <div id="div1">outline Color</div> <div id="div2">outline Width</div> <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> CSS の記述 (OutlineAnimation.css) 先ず ボックスを描画するための #stage の記述をします #stage { margin: 10px 0px 0px 10px; width: 700px; height: 550px; border: solid 1px black; position: relative; 2
次に各種アウトラインを変化させる記述をします 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 "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 80px; で テキストの色は color: black;( 黒色 ) で指定します アニメーション名を style1anime 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* Outline Color **********************************************************/ #div1 { top: 40px; left: 40px; outline: solid 10px yellow; background-color: #CCCCCC; text-align: center; font: bold 32px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 80px; color: black; animation: style1anime 5s linear 0s infinite normal; -webkit-animation: style1anime 5s linear 0s infinite normal; 3
アニメーション名 style1anime に対応するタイムライン (@keyframes) を指定します outline-color を yellow yellowgreen green orange yellow の順に繰り返し 変化するようにします @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; 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 "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 80px; で テキストの色は color: black;( 黒色 ) で指定します アニメーション名を style2anime 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します 4
/* Outline Width **********************************************************/ #div2 { top: 40px; left: 370px; outline: solid 10px deepskyblue; background-color: #CCCCCC; text-align: center; font: bold 32px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 80px; color: black; animation: style2anime 5s linear 0s infinite alternate; -webkit-animation: style2anime 5s linear 0s infinite alternate; アニメーション名 style2anime に対応するタイムライン (@keyframes) を指定します outline-width を 10px から 30px に変化するようにします 前章のボーダーのアニメーションで border-width を変化させたアニメーションでは #div2 span ボックスの位置を から top: -20px; left: -20px; に変化させているのは ボーダーの幅が増えた分だけ content( グレーの部分 ) の位置がずれるのを防ぐためでした アウトラインの場合はアウトラインの幅が増えても content( グレーの部分 ) の位置はずれないので 直接 #div2 要素のアウトラインの幅を増やしていて top と left は変化させる必要はありません @keyframes style2anime { from { outline-width: 10px; to { outline-width: 30px; @-webkit-keyframes style2anime { from { outline-width: 10px; to { outline-width: 30px; 5
3.outline-color outline-width の複合アニメーション アウトラインの色と幅を同時に animation で変化させてみましょう #div3 ボックスは position は absolute 位置は top を 180px left を 40px(#stage ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします アウトラインは幅を 10px 色を緑色 green 種類を solid で指定します 背景色はグレー backgroundcolor: #CCCCCC; で指定します テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 40px; で テキストの色は color: black; ( 黒色 ) で指定します ここでは outline-color outline-width outline-style を個別に指定しています アニメーション名を style3anime 実行時間を 12s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* Outline All (Color,Width) ***********************************************/ #div3 { top: 180px; left: 40px; outline-style: solid; outline-width: 10px; outline-color: green; background-color: #CCCCCC; text-align: center; font: bold 32px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 40px; color: black; animation: style3anime 12s linear 0s infinite normal; -webkit-animation: style3anime 12s linear 0s infinite normal; アニメーション名 style4anime に対応するタイムライン (@keyframes) を指定します outline-color を green blue violet red green に outline-width を 10px 20px 30px 20px 10px に同時に変化し繰り返すようにしました 6
@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; 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 要素を 6 つ記述します 1 つ目から 5 つ目の span 要素は position は absolute 位置は top を 0px left を 0px (#div4 ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします opacity: 0.0; と指定して見えないようにしておきます アニメーションは実行時間を 15s 7
イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指 定します つぎの項目は span 要素ごとに違います span 要素 ボーダーの指定 アニメーション名 1つ目の span 要素 outline: groove 10px aqua; style4anime1 2つ目の span 要素 outline: double 10px forestgreen; style4anime2 3つ目の span 要素 outline: dotted 10px crimson; style4anime3 4つ目の span 要素 outline: inset 10px skyblue; style4anime4 5つ目の span 要素 outline: dashed 10px dimgray; style4anime5 6つ目の span 要素は position は absolute 位置は top を 0px left を 0px(#div4 ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします ボーダーは指定しません 背景色は指定しません テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 40px; で テキストの色は color: black;( 黒色 ) で指定します /* Outline Style (tricky) *********************************************/ /* 注 : outline-style はアニメーションできないので opacity を利用します */ #div4 { top: 180px; left: 370px; outline: solid 10px lightgreen; background-color: #CCCCCC; #div4 > span:nth-child(1) { outline: groove 10px aqua; opacity: 0.0; animation: style4anime1 15s linear 0s infinite normal; -webkit-animation: style4anime1 15s linear 0s infinite normal; #div4 > span:nth-child(2) { outline: double 10px forestgreen; opacity: 0.0; animation: style4anime2 15s linear 0s infinite normal; -webkit-animation: style4anime2 15s linear 0s infinite normal; 8
#div4 > span:nth-child(3) { outline: dotted 10px crimson; opacity: 0.0; animation: style4anime3 15s linear 0s infinite normal; -webkit-animation: style4anime3 15s linear 0s infinite normal; #div4 > span:nth-child(4) { outline: inset 10px skyblue; opacity: 0.0; animation: style4anime4 15s linear 0s infinite normal; -webkit-animation: style4anime4 15s linear 0s infinite normal; #div4 > span:nth-child(5) { outline: dashed 10px dimgray; opacity: 0.0; animation: style4anime5 15s linear 0s infinite normal; -webkit-animation: style4anime5 15s linear 0s infinite normal; #div4 > span:nth-child(6) { text-align: center; font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 40px; color: black; アニメーション名 style4anime1 から style4anime5 に対応するタイムライン (@keyframes) を指定します 1つ目から5つ目の span 要素に違う種類の outline-style を指定してあるので それを1 秒毎に opacity プロパティを利用して次々と見えるようにして まるでボーダーの種類が少しずつ変化するように見せています 9
@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; 10
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; 11