© 2016 電脳 Papa 1
1338-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 を紹
介します。
【BorderAnimation の説明】
〔HTML の記述 （BorderAnimation.html）
〕
id 属性 stage の div 要素を作り、その中に div 要素でボックスを記述します。
id 属性 div1 の div 要素を記述し、中にテキストで Border Color と記述します。 
は半角スペースになります。
id 属性 div2 の div 要素を記述し、中に span 要素を１つ記述しその中にテキストで
サンプルＣＳＳ１
© 2016 電脳 Papa 2
Border Width と記述します。
id 属性 div3 の div 要素を記述し、中にテキストで Border Radius と記述します。
id 属性 div4 の div 要素を記述し、中に span 要素を１つ記述しその中にテキストで
Border All<br />(Color,Width,Radius)と記述します。テキストの間に入っている<br
/>は改行させるタグです。
id 属性 div5 の div 要素の中に<span>タグで span 要素を６つ記述します（span 要素を使用
して５種類のボーダースタイルを切り替えるためです）
。６つ目の span 要素とその中にテ
キストで Border Style<br />(tricky)と記述します。
id 属性 div6 の div 要素の中に<span>タグで span 要素を３つ記述します。
（span 要素を使
用して div 要素の中を２つのグラデーションに分けるためです。
）３つ目の span 要素の中
にテキストで Border Gradation<br />(tricky)と記述します。前の２つの span 要素
でボックスの中がグラデーションで塗りつぶされるのでテキストは３つ目の span 要素に記
述する必要があります。
id 属性 div7 の div 要素の中に<span>タグで span 要素を３つ記述します。
（span 要素を２
つ使用してアリが行進するように点線が移動するアニメーションにするためです。
）３つ目
の 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>
© 2016 電脳 Papa 3
〔CSS の記述（BorderAnimation.css）
〕
先ず、ボックスを描画するための#stage の記述をします。
次に各種ボーダーを変化させる記述します。
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 "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;で、テキストが上下中央
の位置に来るように line-height: 80px;で、テキストの色は color: black;（黒色）で指
定します。
アニメーション名を style1Anime、実行時間を 5s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は normal で指定します。
#stage { margin: 10px 0px 0px 10px; width: 700px; height: 550px; border: solid 1px black; position: relative; } /* Border Color **********************************************************/ #div1 { top: 30px; left: 10px; width: 280px; height: 80px;© 2016 電脳 Papa 4
アニメーション名 style1Anime に対応するタイムライン（@keyframes）を指定します。
border-color を yellow → yellowgreen → green → orange → yellow の順に繰り返し変
化するようにします。
2.border-width のアニメーション
ボーダーの幅を animation で変化させてみましょう。
#div2 ボックスは border-width を 10px → 30px → 10px に繰り返し変化するようにしまし
た。
@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; } }
border: 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; }
© 2016 電脳 Papa 5
#div2 ボックスは、position は absolute、位置は top を 30px、left を 370px（#stage ボッ
クスの左上端を起点とした位置）
、width は 280px、height は 80px にします。子要素として
span 要素を１つ記述します。span 要素のボーダーは幅を 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）を指定します。
border-width を 10px から 30px に変化するようにします。
#div2 ボックスの位置を top: 0px;
left: 0px;から top: -20px; left: -20px;に変化させているのは、ボーダーの幅が増えた
分だけ content（グレーの部分）の位置がずれるのを防ぐためです。
/* Border Width *********************************************************/ #div2 { top: 30px; left: 370px; width: 280px; height: 80px; position: absolute; } #div2 span { top: 0px; left: 0px; width: 280px; height: 80px; border: solid 10px deepskyblue; background-color: #CCCCCC; text-align: center;font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 80px;
color: black; position: absolute;
animation: style2Anime 5s linear 0s infinite alternate;
-webkit-animation: style2Anime 5s linear 0s infinite alternate; }
@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; } }
© 2016 電脳 Papa 6
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 "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;
で、テキストが上下中央の位置に来るように line-height: 80px;で、テキストの色は color:
black;（黒色）で指定します。
アニメーション名を style3Anime、実行時間を 5s、イージングを linear、開始待ち時間を
0s、繰り返しを infinite、実行方向は alternate で指定します。
アニメーション名 style3Anime に対応するタイムライン（@keyframes）を指定します。タ
イムラインの from から 50%の間で border-radius: 50px;（#div3 ボックスの height が 80px
で border-width が 10px なので、まずボーダーを含めたボックスの高さ 100px に合わせた
/* Border Radius ********************************************************/ #div3 {
top: 170px; left: 10px; width: 280px; height: 80px; border: solid 10px salmon; background-color: #CCCCCC; text-align: center;
font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 80px;
color: black; position: absolute;
animation: style3Anime 5s linear 0s infinite alternate;
-webkit-animation: style3Anime 5s linear 0s infinite alternate; }
© 2016 電脳 Papa 7
円形にするため 50px で指定）
に変形し 50%から to の間に border-radius: 150px / 50px; （先
ほどの高さの変形に加えて、#div3 ボックスの width が 280px で border-width が 10px なの
で、まずボーダーを含めたボックスの幅 300px に合わせた円形にするため 150px で指定）
に変形します。アニメーションの実行方向を alternate で指定しているので、その後はま
た元へ戻る変形になります。
（注）つぎのように 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 要素を１つ記述します。span 要素のボーダーは幅を 10px、色を緑色 green、種類を
@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; } } @keyframes style3Anime { from { } to { border-radius: 50%; } }© 2016 電脳 Papa 8
solid で指定します。背景色はグレーbackground-color: #CCCCCC;で指定します。テキスト
は左右中央 text-align: center;で、フォントは font: bold 28px "ＭＳ Ｐゴシック", Osaka,
"ヒラギノ角ゴ Pro", Verdana;で、テキストが上下中央の位置に来るように line-height:
40px;で、テキストの色は color: black;（黒色）で指定します。
ここでは、border-color、border-width、border-radius を個別に指定しています。
アニメーション名を 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 に変化させています。
/* Border All (Color,Width,Radius) **************************************/ #div4 { top: 170px; left: 370px; width: 280px; height: 80px; position: absolute; } #div4 span { top: 0px; left: 0px; width: 280px; height: 80px;
border-style: solid; border-width: 10px; border-color: green; background-color: #CCCCCC;
text-align: center;
font: bold 28px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 40px;
color: black; position: absolute;
animation: style4Anime 12s linear 0s infinite normal;
-webkit-animation: style4Anime 12s linear 0s infinite normal; }
@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; }
© 2016 電脳 Papa 9
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 要素を６つ記述します。
１つ目から５つ目の span 要素は、position は absolute、位置は top を-10px、left を-10px
（#div5 ボックスの左上端を起点とした位置）
、width は 280px、height は 80px にします。
opacity: 0.0;と指定して見えないようにしておきます。
アニメーションは実行時間を 15s、
イージングを linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は normal で指
定します。つぎの項目は span 要素ごとに違います。
〔span 要素〕 〔ボーダーの指定〕 〔アニメーション名〕
１つ目の span 要素 border: groove 10px aqua; style5Anime1
@-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; }
© 2016 電脳 Papa 10
２つ目の span 要素 border: double 10px forestgreen; style5Anime2
３つ目の span 要素 border: dotted 10px crimson; style5Anime3
４つ目の span 要素 border: inset 10px skyblue; style5Anime4
５つ目の span 要素 border: dashed 10px dimgray; style5Anime5
６つ目の span 要素は、position は absolute、位置は top を 0px、left を 0px（#div5 ボッ
クスの左上端を起点とした位置）
、width は 280px、height は 80px にします。ボーダーは指
定しません。背景色は指定しません。テキストは左右中央 text-align: center;で、フォン
トは font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;で、テ
キストが上下中央の位置に来るように line-height: 40px;で、テキストの色は color:
black;（黒色）で指定します。
/* Border Style (tricky) *********************************************/ /* 注：「border-style」はアニメーションできないので、opacity を利用します。 */ #div5 {
top: 300px; left: 10px; width: 280px; height: 80px; border: solid 10px lightgreen; background-color: #CCCCCC; position: absolute; } #div5 > span:nth-child(1) { top: -10px; left: -10px; width: 280px; height: 80px; border: groove 10px aqua; opacity: 0.0;
position: absolute;
animation: style5Anime1 15s linear 0s infinite normal;
-webkit-animation: style5Anime1 15s linear 0s infinite normal; }
#div5 > span:nth-child(2) { top: -10px; left: -10px; width: 280px; height: 80px; border: double 10px forestgreen; opacity: 0.0;
position: absolute;
animation: style5Anime2 15s linear 0s infinite normal;
-webkit-animation: style5Anime2 15s linear 0s infinite normal; }
#div5 > span:nth-child(3) { top: -10px; left: -10px; width: 280px; height: 80px; border: dotted 10px crimson; opacity: 0.0;
© 2016 電脳 Papa 11
アニメーション名 style5Anime1 から style5Anime2 に対応するタイムライン（@keyframes）
を指定します。１つ目から５つ目の span 要素に違う種類の border-style を指定してある
ので、それを１秒毎に opacity プロパティを利用して次々と見えるようにして、まるでボ
ーダーの種類が少しずつ変化するように見せています。
animation: style5Anime3 15s linear 0s infinite normal;
-webkit-animation: style5Anime3 15s linear 0s infinite normal; }
#div5 > span:nth-child(4) { top: -10px; left: -10px; width: 280px; height: 80px; border: inset 10px skyblue; opacity: 0.0;
position: absolute;
animation: style5Anime4 15s linear 0s infinite normal;
-webkit-animation: style5Anime4 15s linear 0s infinite normal; }
#div5 > span:nth-child(5) { top: -10px; left: -10px; width: 280px; height: 80px; border: dashed 10px dimgray; opacity: 0.0;
position: absolute;
animation: style5Anime5 15s linear 0s infinite normal;
-webkit-animation: style5Anime5 15s linear 0s infinite normal; }
#div5 > span:nth-child(6) { top: 0px; left: 0px; width: 280px; height: 80px; text-align: center;
font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 40px; color: black; position: absolute; } @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; }
© 2016 電脳 Papa 12 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; }
© 2016 電脳 Papa 13
6.border をグラデーションで変化させるアニメーション
ボ ー ダ ー を グ ラ デ ー シ ョ ン で 色 を 付 け て 変 化 さ せ て み ま し ょ う 。 W3C 仕 様 で は
border-color プロパティはグラデーションで色を付けられない仕様になっているので、
border-color が変化するように見せるにはトリッキーな方法を使った一工夫が必要です。
#div6 ボックスは、position は absolute、位置は top を 300px、left を 370px（#stage ボ
ックスの左上端を起点とした位置）
、width は 300px、height は 100px にします。background
プロパティを使用して、左から右方向へ赤色から黄色に変化するグラデーションで塗りつ
ぶす指定をします。子要素として span 要素を３つ記述します。
１つ目と２つ目の span 要素は、position は absolute、位置は top を 0px、left を 0px（#div6
ボックスの左上端を起点とした位置）
、width は 300px、height は 100px にします。opacity:
0.0;と指定して見えないようにしておきます。アニメーションは実行時間を 3s、イージン
グを linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は alternate で指定しま
す。つぎの項目は span 要素ごとに違います。
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; } }© 2016 電脳 Papa 14
〔span 要素〕 〔グラデーションの指定〕 〔アニメーション名〕
１つ目の span 要素 赤色から黄色へ変化 grad1Anime
２つ目の span 要素 黄色から赤色へ変化 grad2Anime
３つ目の 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 "ＭＳ Ｐゴシック", 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); position: absolute;
}
#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;
position: absolute;
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;
position: absolute;
animation: grad2Anime 3s linear 0s infinite alternate;
-webkit-animation: grad2Anime 3s linear 0s infinite alternate; }
© 2016 電脳 Papa 15
アニメーション名 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; } } #div6 > span:nth-child(3) { top: 10px; left: 10px; width: 280px; height: 80px; background-color: #CCCCCC; text-align: center;font: bold 32px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 40px;
color: black; position: absolute; }
© 2016 電脳 Papa 16
7.border をマーチングアンツ（蟻の行進）にするアニメーション１
ボーダーを蟻の行進のように点線が動く animation に変化させてみましょう。W3C 仕様で
は border プロパティは border-image を animation で動かすことはできない仕様になって
いるので、border-image が変化するように見せるにはトリッキーな方法を使った一工夫が
必要です。
#div7 ボックスは、position は absolute、位置は top を 430px、left を 10px（#stage ボッ
クスの左上端を起点とした位置）、width は 300px、height は 100px にします。子要素とし
て span 要素を３つ記述します。
１つ目と２つ目の span 要素は、position は absolute、位置は top を 0px、left を 0px（#div6
ボックスの左上端を起点とした位置）
、width は 300px、height は 100px にします。アニメ
ーションは実行時間を 0.5s、
イージングを linear、
開始待ち時間を 0s、
繰り返しを infinite、
実行方向は alternate で指定します。つぎの項目は span 要素ごとに違います。
〔span 要素〕 background-image opacity 〔アニメーション名〕
の指定 の指定
１つ目の span 要素 images/AntsBW1L.png 1.0 ant1Anime1
２つ目の span 要素 images/AntsBW2L.png 0.0 ant1Anime2
〔background-image の画像〕
（AntsBW1L.png 8px X 8px）
（AntsBW2L.png 8px X 8px）
３つ目の 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 "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro",
Verdana;で、テキストが上下中央の位置に来るように line-height: 45px;で、テキストの
色は color: black;（黒色）で指定します。
© 2016 電脳 Papa 17
アニメーション名 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; } }/* Boeder Marching Ants Standard (tricky) ********************************/ /* 注：border は marching ants できないので、background-image を使用して、 border の marching ants アニメーションのように見せます。 */
#div7 { top: 430px; left: 10px; width: 300px; height: 100px; position: absolute; } #div7 > span:nth-child(1) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: url("images/AntsBW1L.png"); opacity: 1.0; position: absolute;
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; position: absolute;
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 "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 45px;
color: black; position: absolute; }
© 2016 電脳 Papa 18
8.border をマーチングアンツ（蟻の行進）にするアニメーション２
ボーダーを蟻の行進のように黄色と黒色の縞模様が動く animation に変化させてみまし
ょう。W3C 仕様では border プロパティは border-image を animation で動かすことはできな
い仕様になっているので、border-image が変化するように見せるにはトリッキーな方法を
使った一工夫が必要です。
#div8 ボックスは、position は absolute、位置は top を 430px、left を 370px（#stage ボ
ックスの左上端を起点とした位置）
、width は 300px、height は 100px にします。子要素と
して span 要素を３つ記述します。
１つ目と２つ目の span 要素は、position は absolute、位置は top を 0px、left を 0px（#div6
ボックスの左上端を起点とした位置）
、width は 300px、height は 100px にします。アニメ
ーションは実行時間を 0.5s、
イージングを linear、
開始待ち時間を 0s、
繰り返しを infinite、
実行方向は alternate で指定します。つぎの項目は span 要素ごとに違います。
@-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; } }© 2016 電脳 Papa 19
〔span 要素〕 background-image opacity 〔アニメーション名〕
の指定 の指定
１つ目の span 要素 images/BYborderS.png 1.0 ant2Anime1
２つ目の span 要素 images/BYborderS-R.png 0.0 ant2Anime2
〔background-image の画像〕
（BYborderS.png 20px X 20px）
（BYborderS-R.png 20px X 20px）
３つ目の 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 "ＭＳ Ｐゴシック", 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; position: absolute; } #div8 > span:nth-child(1) { top: 0px; left: 0px; width: 300px; height: 100px; background-image: url("images/BYborderS.png"); opacity: 1.0; position: absolute;
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;
© 2016 電脳 Papa 20
アニメーション名 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; } } background-image: url("images/BYborderS-R.png"); opacity: 0.0; position: absolute;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 "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; line-height: 45px;
color: black; position: absolute;
animation: ant2ContAnime 2s linear 0s infinite alternate;
-webkit-animation: ant2ContAnime 2s linear 0s infinite alternate; }
© 2016 電脳 Papa 21
アニメーション名 ant2ContAnime に対応するタイムライン（@keyframes）を指定します。
テキストの色を赤色 color: red;に変化させ、背景色を黄緑色 background-color: #99FF66;
に変化させます。
@-webkit-keyframes ant2Anime2 { from { opacity: 0.0; } 49% { opacity: 0.0; } 50% { opacity: 1.0; } to { opacity: 1.0; } } @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; } }
