1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius animation でボックスの角を丸く滑らかに変化させることができます border-style animation でスタイルを滑らかに変化させることができません ( 瞬時に切り替わります ) border-image animation で画像ボーダーを滑らかに変化させることができません ( 瞬時に切り替わります ) また グラデーションを指定することはできません border-style と border-image を animation で滑らかに変化するように見せるためには トリッキーな方法を使います その方法も含めて border 関係プロパティの animation を紹介します サンプル CSS1 BorderAnimation の説明 HTML の記述 (BorderAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Border Color と記述します   は半角スペースになります id 属性 div2 の div 要素を記述し 中に span 要素を 1 つ記述しその中にテキストで 1
Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Width,Radius) と記述します テキストの間に入っている <br /> は改行させるタグです id 属性 div5 の div 要素の中に <span> タグで span 要素を6つ記述します (span 要素を使用して5 種類のボーダースタイルを切り替えるためです ) 6つ目の span 要素とその中にテキストで Border Style<br />(tricky) と記述します id 属性 div6 の div 要素の中に <span> タグで span 要素を3つ記述します ( span 要素を使用して div 要素の中を2つのグラデーションに分けるためです )3つ目の span 要素の中にテキストで Border Gradation<br />(tricky) と記述します 前の2つの span 要素でボックスの中がグラデーションで塗りつぶされるのでテキストは3つ目の span 要素に記述する必要があります id 属性 div7 の div 要素の中に <span> タグで span 要素を3つ記述します ( span 要素を2 つ使用してアリが行進するように点線が移動するアニメーションにするためです )3つ目の span 要素の中にテキストで Marching Ants<br />(tricky) と記述します id 属性 div8 の div 要素は id 属性 div7 の div 要素と同様の記述をします こちらは点線ではなく白黒の縞模様が移動するアニメーションにします <!DOCTYPE html> <html> <head> <title>borderanimation</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="borderanimation.css"> </head> <body> <p> ボーダーをアニメーションで動かす </p> <div id="div1">border Color</div> <div id="div2"><span>border Width</span></div> <div id="div3">border Radius</div> <div id="div4"><span>border All<br />(Color,Width,Radius)</span></div> <div id="div5"><span></span><span></span><span></span><span></span><span></span> <span>border Style<br />(tricky)</span></div> <div id="div6"><span></span><span></span><span>border Gradation<br /> (tricky)</span></div> <div id="div7"><span></span><span></span><span>marching Ants<br /> (tricky)</span></div> <div id="div8"><span></span><span></span><span>marching Ants<br /> (tricky)</span></div> </div> </body> </html> 2
CSS の記述 (BorderAnimation.css) 先ず ボックスを描画するための #stage の記述をします #stage { margin: 10px 0px 0px 10px; width: 700px; height: 550px; border: solid 1px black; position: relative; 次に各種ボーダーを変化させる記述します 1.border-color のアニメーション ボーダーの色を animation で変化させてみましょう #div1 ボックスは border-color を yellow yellowgreen green orange yellow の順に繰り返し変化するようにしました #div1 ボックスは position は absolute 位置は top を 30px left を 10px(#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 で指定します /* Border Color **********************************************************/ #div1 { top: 30px; left: 10px; 3
border: 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; アニメーション名 style1anime に対応するタイムライン (@keyframes) を指定します border-color を yellow yellowgreen green orange yellow の順に繰り返し変 化するようにします @keyframes style1anime { from { border-color: yellow; 10% { border-color: yellow; 40% { border-color: yellowgreen; 60% { border-color: green; 85% { border-color: orange; to { border-color: yellow; @-webkit-keyframes style1anime { from { border-color: yellow; 10% { border-color: yellow; 40% { border-color: yellowgreen; 60% { border-color: green; 85% { border-color: orange; to { border-color: yellow; 2.border-width のアニメーション ボーダーの幅を animation で変化させてみましょう #div2 ボックスは border-width を 10px 30px 10px に繰り返し変化するようにしまし た 4
#div2 ボックスは position は absolute 位置は top を 30px left を 370px(#stage ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします 子要素として span 要素を1つ記述します span 要素のボーダーは幅を 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 で指定します /* Border Width *********************************************************/ #div2 { top: 30px; left: 370px; #div2 span { top: 0px; left: 0px; border: 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) を指定します border-width を 10px から 30px に変化するようにします #div2 ボックスの位置を top: 0px; left: 0px; から top: -20px; left: -20px; に変化させているのは ボーダーの幅が増えた分だけ content( グレーの部分 ) の位置がずれるのを防ぐためです @keyframes style2anime { from { top: 0px; left: 0px; border-width: 10px; to { top: -20px; left: -20px; border-width: 30px; @-webkit-keyframes style2anime { from { top: 0px; left: 0px; border-width: 10px; to { top: -20px; left: -20px; border-width: 30px; 5
3.border-radius のアニメーション ボーダーの角を animation で丸く変化させてみましょう #div3 ボックスは角を丸くして四角形から楕円形に変化後また元にもどる変形を繰り返すようにしました #div3 ボックスは position は absolute 位置は top を 170px left を 10px(#stage ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします ボーダーは幅を 10px 色をサーモンピンク salmon 種類を solid で指定します 背景色はグレー background-color: #CCCCCC; で指定します テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 80px; で テキストの色は color: black;( 黒色 ) で指定します アニメーション名を style3anime 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します /* Border Radius ********************************************************/ #div3 { top: 170px; left: 10px; border: solid 10px salmon; background-color: #CCCCCC; text-align: center; font: bold 32px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 80px; color: black; animation: style3anime 5s linear 0s infinite alternate; -webkit-animation: style3anime 5s linear 0s infinite alternate; アニメーション名 style3anime に対応するタイムライン (@keyframes) を指定します タ イムラインの from から 50% の間で border-radius: 50px;(#div3 ボックスの height が 80px で border-width が 10px なので まずボーダーを含めたボックスの高さ 100px に合わせた 6
円形にするため 50px で指定 ) に変形し 50% から to の間に border-radius: 150px / 50px; ( 先ほどの高さの変形に加えて #div3 ボックスの width が 280px で border-width が 10px なので まずボーダーを含めたボックスの幅 300px に合わせた円形にするため 150px で指定 ) に変形します アニメーションの実行方向を alternate で指定しているので その後はまた元へ戻る変形になります @keyframes style3anime { from { border-radius: 0px; 50% { border-radius: 50px; to { border-radius: 150px / 50px; @-webkit-keyframes style3anime { from { border-radius: 0px; 50% { border-radius: 50px; to { border-radius: 150px / 50px; ( 注 ) つぎのように border-radius: 50%; と指定してもボックスを楕円形にすることができ ますが 四角形から楕円形の変化がきれいな曲線の変化になりません @keyframes style3anime { from { to { border-radius: 50%; 4.border-color border-width border-radius border-style の複合アニメーション ボーダーの色 幅 角の半径 スタイルを同時に animation で変化させてみましょう #div4 ボックスは position は absolute 位置は top を 170px left を 370px(#stage ボ ックスの左上端を起点とした位置 ) width は 280px height は 80px にします 子要素とし て span 要素を 1 つ記述します span 要素のボーダーは幅を 10px 色を緑色 green 種類を 7
solid で指定します 背景色はグレー background-color: #CCCCCC; で指定します テキストは左右中央 text-align: center; で フォントは font: bold 28px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 40px; で テキストの色は color: black;( 黒色 ) で指定します ここでは border-color border-width border-radius を個別に指定しています アニメーション名を style4anime 実行時間を 12s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* Border All (Color,Width,Radius) **************************************/ #div4 { top: 170px; left: 370px; #div4 span { top: 0px; left: 0px; border-style: solid; border-width: 10px; border-color: green; background-color: #CCCCCC; text-align: center; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 40px; color: black; animation: style4anime 12s linear 0s infinite normal; -webkit-animation: style4anime 12s linear 0s infinite normal; アニメーション名 style4anime に対応するタイムライン (@keyframes) を指定します border-color を green blue violet red green に border-width を 10px 20px 30px 20px 10px に border-radius を 0px 30px 60px 30px 0px に同時に変化し繰り返すようにしました #div4 ボックスも位置がずれるのを防ぐため top と left を 0px -10px -20px -10px 0px に変化させています @keyframes style4anime { from { border-color: green; border-width: 10px; border-radius: 0px; top: 0px; left: 0px; 25% { border-color: blue; border-width: 20px; border-radius: 30px; top: -10px; left: -10px; 50% { border-color: violet; border-width: 30px; border-radius: 60px; top: -20px; left: -20px; 75% { border-color: red; border-width: 20px; border-radius: 30px; top: -10px; left: -10px; to { border-color: green; border-width: 10px; border-radius: 0px; top: 0px; left: 0px; 8
@-webkit-keyframes style4anime { from { border-color: green; border-width: 10px; border-radius: 0px; top: 0px; left: 0px; 25% { border-color: blue; border-width: 20px; border-radius: 30px; top: -10px; left: -10px; 50% { border-color: violet; border-width: 30px; border-radius: 60px; top: -20px; left: -20px; 75% { border-color: red; border-width: 20px; border-radius: 30px; top: -10px; left: -10px; to { border-color: green; border-width: 10px; border-radius: 0px; top: 0px; left: 0px; 5.border-style の連続アニメーションボーダースタイルを連続して変化させてみましょう W3C 仕様では border-style はアニメーションさせることができません border-style を animation で変化させようとしても よく動きを見ると border-style はすぐに切り替わっていることがわかります ですから連続して変化するように見せるためには次のようなトリッキーな方法を使った一工夫が必要です #div5 ボックスは position は absolute 位置は top を 300px left を 10px(#stage ボッ クスの左上端を起点とした位置 ) width は 280px height は 80px にします ボーダーは幅 を 10px 色を緑色 lightgreen 種類を solid で指定します 背景色はグレー background-color: #CCCCCC; で指定します 子要素として span 要素を 6 つ記述します 1 つ目から 5 つ目の span 要素は position は absolute 位置は top を -10px left を -10px (#div5 ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします opacity: 0.0; と指定して見えないようにしておきます アニメーションは実行時間を 15s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指 定します つぎの項目は span 要素ごとに違います span 要素 ボーダーの指定 アニメーション名 1 つ目の span 要素 border: groove 10px aqua; style5anime1 9
2つ目の span 要素 border: double 10px forestgreen; style5anime2 3つ目の span 要素 border: dotted 10px crimson; style5anime3 4つ目の span 要素 border: inset 10px skyblue; style5anime4 5つ目の span 要素 border: dashed 10px dimgray; style5anime5 6つ目の span 要素は position は absolute 位置は top を 0px left を 0px(#div5 ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします ボーダーは指定しません 背景色は指定しません テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 40px; で テキストの色は color: black;( 黒色 ) で指定します /* Border Style (tricky) *********************************************/ /* 注 : border-style はアニメーションできないので opacity を利用します */ #div5 { top: 300px; left: 10px; border: solid 10px lightgreen; background-color: #CCCCCC; #div5 > span:nth-child(1) { top: -10px; left: -10px; border: groove 10px aqua; opacity: 0.0; animation: style5anime1 15s linear 0s infinite normal; -webkit-animation: style5anime1 15s linear 0s infinite normal; #div5 > span:nth-child(2) { top: -10px; left: -10px; border: double 10px forestgreen; opacity: 0.0; animation: style5anime2 15s linear 0s infinite normal; -webkit-animation: style5anime2 15s linear 0s infinite normal; #div5 > span:nth-child(3) { top: -10px; left: -10px; border: dotted 10px crimson; opacity: 0.0; 10
animation: style5anime3 15s linear 0s infinite normal; -webkit-animation: style5anime3 15s linear 0s infinite normal; #div5 > span:nth-child(4) { top: -10px; left: -10px; border: inset 10px skyblue; opacity: 0.0; animation: style5anime4 15s linear 0s infinite normal; -webkit-animation: style5anime4 15s linear 0s infinite normal; #div5 > span:nth-child(5) { top: -10px; left: -10px; border: dashed 10px dimgray; opacity: 0.0; animation: style5anime5 15s linear 0s infinite normal; -webkit-animation: style5anime5 15s linear 0s infinite normal; #div5 > span:nth-child(6) { top: 0px; left: 0px; text-align: center; font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 40px; color: black; アニメーション名 style5anime1 から style5anime2 に対応するタイムライン (@keyframes) を指定します 1つ目から5つ目の span 要素に違う種類の border-style を指定してあるので それを1 秒毎に opacity プロパティを利用して次々と見えるようにして まるでボーダーの種類が少しずつ変化するように見せています @keyframes style5anime1 { from { opacity: 0.0; 15% { opacity: 1.0; 20% { opacity: 0.0; to { opacity: 0.0; @-webkit-keyframes style5anime1 { from { opacity: 0.0; 11
15% { opacity: 1.0; 20% { opacity: 0.0; to { opacity: 0.0; @keyframes style5anime2 { 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 style5anime2 { 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 style5anime3 { 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 style5anime3 { 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 style5anime4 { from { opacity: 0.0; 55% { opacity: 0.0; 60% { opacity: 1.0; 75% { opacity: 1.0; 80% { opacity: 0.0; to { opacity: 0.0; @-webkit-keyframes style5anime4 { from { opacity: 0.0; 55% { opacity: 0.0; 60% { opacity: 1.0; 12
75% { opacity: 1.0; 80% { opacity: 0.0; to { opacity: 0.0; @keyframes style5anime5 { from { opacity: 0.0; 75% { opacity: 0.0; 80% { opacity: 1.0; 95% { opacity: 1.0; to { opacity: 0.0; @-webkit-keyframes style5anime5 { from { opacity: 0.0; 75% { opacity: 0.0; 80% { opacity: 1.0; 95% { opacity: 1.0; to { opacity: 0.0; 6.border をグラデーションで変化させるアニメーションボーダーをグラデーションで色を付けて変化させてみましょう W3C 仕様では border-color プロパティはグラデーションで色を付けられない仕様になっているので border-color が変化するように見せるにはトリッキーな方法を使った一工夫が必要です #div6 ボックスは position は absolute 位置は top を 300px left を 370px(#stage ボ ックスの左上端を起点とした位置 ) width は 300px height は 100px にします background プロパティを使用して 左から右方向へ赤色から黄色に変化するグラデーションで塗りつ ぶす指定をします 子要素として span 要素を 3 つ記述します 1 つ目と 2 つ目の span 要素は position は absolute 位置は top を 0px left を 0px(#div6 ボックスの左上端を起点とした位置 ) width は 300px height は 100px にします opacity: 0.0; と指定して見えないようにしておきます アニメーションは実行時間を 3s イージン グを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定しま す つぎの項目は span 要素ごとに違います 13
span 要素 グラデーションの指定 アニメーション名 1 つ目の span 要素赤色から黄色へ変化 grad1anime 2 つ目の span 要素黄色から赤色へ変化 grad2anime 3つ目の span 要素は position は absolute 位置は top を 10px left を 10px(#div6 ボックスの左上端を起点とした位置 ) width は 280px height は 80px にします ( ボーダー幅 10px 分だけグラデーションが見えるようにしたいので top: 10px; left: 10px; だけずらし span 要素の幅と高さも 20px 小さく指定します ) ボーダーは指定しません 背景色はグレー background-color: #CCCCCC; で指定します テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 40px; で テキストの色は color: black;( 黒色 ) で指定します /* Border Gradation (tricky) *********************************************/ /* 注 :border は gradation できないので background-image と opacity を利用して border の gradation アニメーションのように見せます */ #div6 { top: 300px; left: 370px; width: 300px; height: 100px; background-image: linear-gradient(to right, red, yellow); background-image: -webkit-linear-gradient(left, red, yellow); #div6 > span:nth-child(1) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: linear-gradient(to right, red, yellow); background-image: -webkit-linear-gradient(left, red, yellow); opacity: 0.0; animation: grad1anime 3s linear 0s infinite alternate; -webkit-animation: grad1anime 3s linear 0s infinite alternate; #div6 > span:nth-child(2) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: linear-gradient(to right, yellow, red); background-image: -webkit-linear-gradient(left, yellow, red); opacity: 0.0; animation: grad2anime 3s linear 0s infinite alternate; -webkit-animation: grad2anime 3s linear 0s infinite alternate; 14
#div6 > span:nth-child(3) { top: 10px; left: 10px; background-color: #CCCCCC; text-align: center; font: bold 32px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 40px; color: black; アニメーション名 grad1anime と grad21anime に対応するタイムライン (@keyframes) を指 定します opacity プロパティを利用して赤色から黄色のグラデーションと黄色から赤色の グラデーションが徐々に変化するように見せています @keyframes grad1anime { from { opacity: 1.0; to { opacity: 0.0; @-webkit-keyframes grad1anime { from { opacity: 1.0; to { opacity: 0.0; @keyframes grad2anime { from { opacity: 0.0; to { opacity: 1.0; @-webkit-keyframes grad2anime { from { opacity: 0.0; to { opacity: 1.0; 15
7.border をマーチングアンツ ( 蟻の行進 ) にするアニメーション1 ボーダーを蟻の行進のように点線が動く animation に変化させてみましょう W3C 仕様では border プロパティは border-image を animation で動かすことはできない仕様になっているので border-image が変化するように見せるにはトリッキーな方法を使った一工夫が必要です #div7 ボックスは position は absolute 位置は top を 430px left を 10px(#stage ボッ クスの左上端を起点とした位置 ) width は 300px height は 100px にします 子要素とし て span 要素を3つ記述します 1つ目と2つ目の span 要素は position は absolute 位置は top を 0px left を 0px(#div6 ボックスの左上端を起点とした位置 ) width は 300px height は 100px にします アニメ ーションは実行時間を 0.5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します つぎの項目は span 要素ごとに違います span 要素 background-image opacity アニメーション名 の指定 の指定 1つ目の span 要素 images/antsbw1l.png 1.0 ant1anime1 2つ目の span 要素 images/antsbw2l.png 0.0 ant1anime2 background-image の画像 (AntsBW1L.png 8px X 8px) (AntsBW2L.png 8px X 8px) 3つ目の span 要素は position は absolute 位置は top を 1px left を 1px(#div7 ボックスの左上端を起点とした位置 ) width は 298px height は 98px にします ( ボーダー幅 1px 分だけ background-image の画像が見えるようにしたいので top: 1px; left: 1px; だけずらし span 要素の幅と高さも 2px 小さく指定します ) ボーダーは指定しません 背景色はグレー background-color: #CCCCCC; で指定します テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 45px; で テキストの色は color: black;( 黒色 ) で指定します 16
/* Boeder Marching Ants Standard (tricky) ********************************/ /* 注 :border は marching ants できないので background-image を使用して border の marching ants アニメーションのように見せます */ #div7 { top: 430px; left: 10px; width: 300px; height: 100px; #div7 > span:nth-child(1) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: url("images/antsbw1l.png"); opacity: 1.0; animation: ant1anime1 0.5s linear 0s infinite alternate; -webkit-animation: ant1anime1 0.5s linear 0s infinite alternate; #div7 > span:nth-child(2) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: url("images/antsbw2l.png"); opacity: 0.0; animation: ant1anime2 0.5s linear 0s infinite alternate; -webkit-animation: ant1anime2 0.5s linear 0s infinite alternate; #div7 > span:nth-child(3) { top: 1px; left: 1px; width: 298px; height: 98px; background-color: #CCCCCC; text-align: center; font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 45px; color: black; アニメーション名 ant1anime1 と ant1anime2 に対応するタイムライン (@keyframes) を指 定します opacity プロパティを利用して 前半 50% は AntsBW1L.png を見えるようにして 後半 50% は AntsBW2L.png を見えるようにすることで蟻の行進のように見せています @keyframes ant1anime1 { from { opacity: 1.0; 49% { opacity: 1.0; 50% { opacity: 0.0; to { opacity: 0.0; 17
@-webkit-keyframes ant1anime1 { from { opacity: 1.0; 49% { opacity: 1.0; 50% { opacity: 0.0; to { opacity: 0.0; @keyframes ant1anime2 { from { opacity: 0.0; 49% { opacity: 0.0; 50% { opacity: 1.0; to { opacity: 1.0; @-webkit-keyframes ant1anime2 { from { opacity: 0.0; 49% { opacity: 0.0; 50% { opacity: 1.0; to { opacity: 1.0; 8.border をマーチングアンツ ( 蟻の行進 ) にするアニメーション2 ボーダーを蟻の行進のように黄色と黒色の縞模様が動く animation に変化させてみましょう W3C 仕様では border プロパティは border-image を animation で動かすことはできない仕様になっているので border-image が変化するように見せるにはトリッキーな方法を使った一工夫が必要です #div8 ボックスは position は absolute 位置は top を 430px left を 370px(#stage ボ ックスの左上端を起点とした位置 ) width は 300px height は 100px にします 子要素と して span 要素を 3 つ記述します 1 つ目と 2 つ目の span 要素は position は absolute 位置は top を 0px left を 0px(#div6 ボックスの左上端を起点とした位置 ) width は 300px height は 100px にします アニメ ーションは実行時間を 0.5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します つぎの項目は span 要素ごとに違います 18
span 要素 background-image opacity アニメーション名 の指定 の指定 1つ目の span 要素 images/byborders.png 1.0 ant2anime1 2つ目の span 要素 images/byborders-r.png 0.0 ant2anime2 background-image の画像 (BYborderS.png 20px X 20px) (BYborderS-R.png 20px X 20px) 3つ目の span 要素は position は absolute 位置は top を 4px left を 4px(#div8 ボックスの左上端を起点とした位置 ) width は 292px height は 92px にします ( ボーダー幅 4px 分だけ background-image の画像が見えるようにしたいので top: 4px; left: 4px; だけずらし span 要素の幅と高さも 8px 小さく指定します ) ボーダーは指定しません 背景色は空色 background-color: #6699FF; で指定します テキストは左右中央 text-align: center; で フォントは font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; で テキストが上下中央の位置に来るように line-height: 45px; で テキストの色は color: white;( 白色 ) で指定します アニメーション名は ant2contanime 実行時間を 2s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します /* Boeder Marching Ants by Black&White Border (tricky) ********************/ /* 注 :border は marching ants できないので background-image を使用して border の marching ants アニメーションのように見せます */ #div8 { top: 430px; left: 370px; width: 300px; height: 100px; #div8 > span:nth-child(1) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: url("images/byborders.png"); opacity: 1.0; animation: ant2anime1 0.5s linear 0s infinite alternate; -webkit-animation: ant2anime1 0.5s linear 0s infinite alternate; #div8 > span:nth-child(2) { top: 0px; left: 0px; width: 300px; height: 100px; 19
background-image: url("images/byborders-r.png"); opacity: 0.0; animation: ant2anime2 0.5s linear 0s infinite alternate; -webkit-animation: ant2anime2 0.5s linear 0s infinite alternate; #div8 > span:nth-child(3) { top: 4px; left: 4px; width: 292px; height: 92px; background-color: #6699FF; text-align: center; font: bold 32px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 45px; color: black; animation: ant2contanime 2s linear 0s infinite alternate; -webkit-animation: ant2contanime 2s linear 0s infinite alternate; アニメーション名 ant1anime1 と ant1anime2 に対応するタイムライン (@keyframes) を指 定します opacity プロパティを利用して 前半 50% は AntsBW1L.png を見えるようにして 後半 50% は AntsBW2L.png を見えるようにすることで蟻の行進のように見せています @keyframes ant2anime1 { from { opacity: 1.0; 49% { opacity: 1.0; 50% { opacity: 0.0; to { opacity: 0.0; @-webkit-keyframes ant2anime1 { from { opacity: 1.0; 49% { opacity: 1.0; 50% { opacity: 0.0; to { opacity: 0.0; @keyframes ant2anime2 { from { opacity: 0.0; 49% { opacity: 0.0; 50% { opacity: 1.0; to { opacity: 1.0; 20
@-webkit-keyframes ant2anime2 { from { opacity: 0.0; 49% { opacity: 0.0; 50% { opacity: 1.0; to { opacity: 1.0; アニメーション名 ant2contanime に対応するタイムライン (@keyframes) を指定します テキストの色を赤色 color: red; に変化させ 背景色を黄緑色 background-color: #99FF66; に変化させます @keyframes ant2contanime { from { color: white; background-color: #6699FF; to { color: red; background-color: #99FF66; @-webkit-keyframes ant2contanime { from { color: white; background-color: #6699FF; to { color: red; background-color: #99FF66; 21