をさせる ) ような場合にそれぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class="

(1)

1346-9 応用２ Class Selector

たくさんの要素を一気に動かす魔法の CSS でアニメーションを作ってみましょう。

動かす要素がたくさんあって全て同じような動きをするアニメーションの場合には、クラ

スセレクタを使うと一気に動かすことができます。

〔id セレクタと class セレクタ〕

ここで id セレクタと class セレクタの復習をしましょう。

■

id セレクタ

#id 名 { プロパティ名: 値; }

HTML 文書で id 属性（ id=" " ）によって id 名が付けられた要素（タグと考えるとよい

でしょう）を対象にスタイルが適用されます。１つの HTML 文書内では同一 id 名称を重複

して使用することはできません。

ですから、複数の要素にアニメーションで同一のプロパティを指定する（つまり同じ変化

(2)

をさせる）ような場合に、それぞれの要素に id 属性で id 名を指定している場合には、CSS

の id セレクタごとにアニメーションでプロパティを指定する必要があります。

■

class セレクタ

.class 名 { プロパティ名: 値; }

HTML 文書で class 属性（ class=" " ）によって class 名が付けられた要素（タグと考え

るとよいでしょう）を対象にスタイルが適用されます。class 属性は id 属性と違って１つ

の HTML 文書内で同一 class 名称を重複して使用することができるので、複数の要素に同一

class 名を指定してスタイルを適用することができます。異なる要素に対して同一 class 名

を指定することもできます。

ですから、複数の要素にアニメーションで同一のプロパティを指定する（つまり同じ変

化をさせる）ような場合に、それぞれの要素に class 属性で同一 class 名を指定して、CSS

の class セレクタにアニメーションでプロパティを指定すれば、要素毎にプロパティを指

定しなくても、同一プロパティが適用されます。

≪セレクタの優先順位について≫

１つの要素に要素型セレクタ、id セレクタ、class セレクタの３つを指定し、それぞれの

セレクタに同一のプロパティを異なった値で指定すると、次の優先順位でプロパティの値

が適用されます。

●セレクタの優先順位（高＞低）

id セレクタ＞ class セレクタ＞要素型セレクタ

詳しくは「1222-B Transform Using Class And Tag （class セレクタと要素型セレクタ（Tag）

を使用してスタイルを適用する）」を参照してください。

●UFO が突然出現して回転するアニメーション

UFO が一点から出現して回転を繰り返し、また消失します。

(3)

【RollingUFOs の説明】

〔HTML の記述（RollingUFOs.html）

〕

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

id 属性 rotateRect の div 要素を記述し、その中に class 属性 circle および id 属性 UFOs

の div 要素を記述します。

class 属性 circle および id 属性 UFOs の div 要素の中に、class 属性 circle の８個の div

要素を記述します。

〔CSS の記述（RollingUFOs.css）

〕

#stage ステージのスタイルを指定します。width は 600px、height は 500px で指定します。

<!DOCTYPE html>

<title>RollingUFOs</title> <meta charset="UTF-8">

<body>

<p>■UFO が１点から広がって、回転を繰り返す。</p> <div id="stage">

(4)

背景色を background-color: black;（黒色）で指定します。目には見えませんが UFO が回

転する時に要素の一部が#stage ボックスからはみ出るようなので、overflow: hidden;を指

定します。

#rotateRect 要素

（縦横回転するボックス）のスタイルを指定します。

position は absolute、

位置は top: 210px; left: 260px;（#stage ボックスの左上端を起点とした位置）で指定し

ます。width は 80px、height は 80px で指定します。

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

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

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

0% から 25% の間はそのままで、 25% から 75% の間に transform: rotateX(360deg)

rotateY(360deg);で X 軸の正方向から見て時計回りに 360 度、Y 軸の正方向から見て時計回

りに 360 度回転させます。75%から 100%の間はそのままにします。

0%から 25%の間は UFO が展開する時間、75%から 100%の間は UFO が収束する時間なので回転

させないようにしています。

#stage { width: 600px; height: 500px; background-color: black; position: relative; overflow: hidden; } #rotateRect { top: 210px; left: 260px; width: 80px; height: 80px; position: absolute;

animation: rotateRectAnime 20s linear 0s infinite normal;

-webkit-animation: rotateRectAnime 20s linear 0s infinite normal; }

@keyframes rotateRectAnime { 0% { }

25% { transform: rotateX( 0deg ) rotateY( 0deg ); animation-timing-function: ease-in-out; }

75% { transform: rotateX( 360deg ) rotateY( 360deg ); } 100% { transform: rotateX( 360deg ) rotateY( 360deg ); } }

(5)

.circle 要素のスタイルを指定します。ここでは class セレクタを使ってすべての FUO の共

通スタイルを指定します。position は absolute、位置は top: 0px; left: 0px;で指定しま

す。

（注：#UFOs の div 要素は#rotateRect ボックスの左上端を起点とした位置で、#UFOs の

子供の div 要素は#UFOs ボックスの左上端を起点とした位置になります。

）width は 80px、

height は 80px で指定します。border-radius: 10px;で角丸四角形にしておきます。

#UFOs 要素（８個の UFO の中心に位置する親 UFO）のスタイルを指定します。背景色を

background-color: cyan;（シアン色）にします。最初は見えないように opacity: 0.0;と

指定しておきます。opacity プロパティは子孫に継承されるので子供の UFO も最初は見えま

せん。

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

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

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

ら 25%の間に opacity: 1.0;に変化させ見えるようにします。ここで子供の UFO も見えるよ

うになります。border-radius: 80px;に変化させて円形にします。25%から 75%の間に円形

/* UFOs ****************************************************/ .circle { top: 0px; left: 0px; width: 80px; height: 80px; border-radius: 10px; position: absolute; } #UFOs { background-color: cyan; opacity: 0.0;

animation: UFOsAnime 20s linear 0s infinite normal;

-webkit-animation: UFOsAnime 20s linear 0s infinite normal; }

@-webkit-keyframes rotateRectAnime { 0% { }

25% { -webkit-transform: rotateX( 0deg ) rotateY( 0deg ); -webkit-animation-timing-function: ease-in-out; }

75% { -webkit-transform: rotateX( 360deg ) rotateY( 360deg ); } 100% { -webkit-transform: rotateX( 360deg ) rotateY( 360deg ); } }

(6)

に見えるまま transform: rotateZ(720deg);で時計回りに 720 度（２回転）回転させます。

75%から 100%の間に 720 度回転が終了した状態で opacity: 0.0;に変化させ見えないように

します。ここで子供の UFO も見えなくなります。border-radius: 10px;に変化させて角丸

四角形にします。

0%から 25%の間は UFO が展開する時間、75%から 100%の間は UFO が収束する時間なので回転

させないようにしています。

#UFOs > div:nth-child(1)要素（１個目の子供 UFO）のスタイルを指定します。背景色を

background-color: yellow;（黄色）にします。

アニメーション名を UFO-01Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

アニメーション名 UFO-01Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(90deg) translateX(150px);で時計回りに 90 度回転させながら X 軸の正方向へ

150px 移動させます。これにより子供 UFO が中心の親 UFO から螺旋を描いて離れていくよう

に見えます。 25% から 75% の間はそのままです。 75% から 100% の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。これにより子供 UFO が螺旋を描きながら中心の親 UFO に収束していくよ

うに見えます。

@keyframes UFOsAnime {

0% { opacity: 0.0; transform: rotateZ(0deg); }

25% { opacity: 1.0; border-radius: 80px; transform: rotateZ(0deg); } 75% { opacity: 1.0; border-radius: 80px; transform: rotateZ(720deg); } 100% { opacity: 0.0; transform: rotateZ(720deg); }

}

@-webkit-keyframes UFOsAnime {

0% { opacity: 0.0; -webkit-transform: rotateZ(0deg); }

25% { opacity: 1.0; border-radius: 80px; -webkit-transform: rotateZ(0deg); } 75% { opacity: 1.0; border-radius: 80px; -webkit-transform: rotateZ(720deg); } 100% { opacity: 0.0; -webkit-transform: rotateZ(720deg); }

}

#UFOs > div:nth-child(1) { background-color: yellow;

animation: UFO-01Anime 20s linear 0s infinite normal;

-webkit-animation: UFO-01Anime 20s linear 0s infinite normal; }

(7)

#UFOs > div:nth-child(2)要素（２個目の子供 UFO）のスタイルを指定します。背景色を

background-color: salmon;（サーモンピンク色）にします。

アニメーション名を UFO-02Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

アニメーション名 UFO-02Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(135deg) translateX(150px);で時計回りに 135 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。

@keyframes UFO-01Anime { 0% { } 25% { border-radius: 80px;

transform: rotateZ(90deg) translateX(150px); } 75% { border-radius: 80px;

transform: rotateZ(90deg) translateX(150px); } 100% { transform: rotateZ(765deg) translateX(0px); } }

@-webkit-keyframes UFO-01Anime { 0% { }

25% { border-radius: 80px;

-webkit-transform: rotateZ(90deg) translateX(150px); } 75% { border-radius: 80px;

-webkit-transform: rotateZ(90deg) translateX(150px); } 100% { -webkit-transform: rotateZ(765deg) translateX(0px); } }

@keyframes UFO-02Anime { 0% { }

transform: rotateZ(135deg) translateX(150px); } #UFOs > div:nth-child(2) {

background-color: salmon;

(8)

#UFOs > div:nth-child(3)要素（３個目の子供 UFO）のスタイルを指定します。背景色を

background-color: yellowgreen;（黄緑色）にします。

アニメーション名を UFO-03Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

アニメーション名 UFO-03Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(180deg) translateX(150px);で時計回りに 180 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。

100% { transform: rotateZ(765deg) translateX(0px); } }

-webkit-transform: rotateZ(180deg) translateX(150px); } #UFOs > div:nth-child(3) {

background-color: yellowgreen;

(9)

#UFOs > div:nth-child(4)要素（４個目の子供 UFO）のスタイルを指定します。背景色を

background-color: lightgray;（明るい灰色）にします。

アニメーション名を UFO-04Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

アニメーション名 UFO-04Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(225deg) translateX(150px);で時計回りに 225 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。

#UFOs > div:nth-child(4) { background-color: lightgray;

(10)

#UFOs > div:nth-child(5)要素（５個目の子供 UFO）のスタイルを指定します。背景色を

background-color: pink;（ピンク色）にします。

アニメーション名を UFO-05Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

アニメーション名 UFO-05Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(270deg) translateX(150px);で時計回りに 270 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。

#UFOs > div:nth-child(6)要素（６個目の子供 UFO）のスタイルを指定します。背景色を

background-color: orange;（オレンジ色）にします。

アニメーション名を UFO-06Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

#UFOs > div:nth-child(5) { background-color: pink;

(11)

アニメーション名 UFO-06Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(315deg) translateX(150px);で時計回りに 315 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。

#UFOs > div:nth-child(7)要素（７個目の子供 UFO）のスタイルを指定します。背景色を

background-color: violet;（紫色）にします。

アニメーション名を UFO-07Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

#UFOs > div:nth-child(6) { background-color: orange;

#UFOs > div:nth-child(7) { background-color: violet;

(12)

アニメーション名 UFO-07Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(360deg) translateX(150px);で時計回りに 360 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

を元に戻します。

#UFOs > div:nth-child(8)要素（８個目の子供 UFO）のスタイルを指定します。背景色を

background-color: skyblue;（空色）にします。

アニメーション名を UFO-08Anime、実行時間を 20s、イージングを linear、開始待ち時間を

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

アニメーション名 UFO-08Anime に対応するタイムライン（@keyframes）を指定します。0%

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

rotateZ(405deg) translateX(150px);で時計回りに 405 度回転させながら X 軸の正方向へ

150px 移動させます。25%から 75%の間はそのままです。75%から 100%の間に transform:

rotateZ(765deg) translateX(0px);で時計回りに 765 度まで回転させながら X 軸上の位置

#UFOs > div:nth-child(8) { background-color: skyblue;

(13)

を元に戻します。

(14)

●宇宙空間をワープするアニメーション

宇宙空間をワープします。星が前方から現れて超高速度で通過していきます。

【WarpDots の説明】

〔HTML の記述（WarpDots.html）

〕

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

id 属性 universe1 の div 要素を記述します。id 属性 universe2 の div 要素を記述し、その

中に span 要素を４つ記述します。

id 属性 dotGroup1 の div 要素を記述し、その中に id 属性 dot01 から dot12 の１２個の div

要素を記述します。１２個の div 要素に dots1、dots2、dots3 の順で class 属性を付けま

す。

id 属性 dotGroup2 の div 要素を記述し、その中に id 属性 dot13 から dot24 の１２個の div

要素を記述します。１２個の div 要素に dots3、dots1、dots2 の順で class 属性を付けま

す。

サンプルＣＳＳ２

<!DOCTYPE html> <html> <head> <title>WarpDots</title> <meta charset="UTF-8">

(15)

〔CSS の記述（WarpDots.css）

〕

#stage ステージのスタイルを指定します。width は 600px、height は 500px で指定します。

背景色を background-color: black;（黒色）で指定します。星がボックスからはみ出るの

で、overflow: hidden;を指定します。

#universe1 要素（背景の宇宙のグラデーション１）のスタイルを指定します。position は

absolute、位置は top: -150px; left: -100px;（#stage ボックスの左上端を起点とした位

#stage { width: 600px; height: 500px; background-color: black; position: relative; overflow: hidden; }

</div> </body> </html>

(16)

置）で指定します。width は 800px、height は 800px で指定します。背景を background:

radial-gradient (#000000, #CC0000 );で中央を黒色で徐々に外側へ赤色に変化する円形

グラデーションにします。opacity: 0.6;で少し薄めにします。

#universe2 要素（背景の宇宙のグラデーション２）のスタイルを指定します。position は

absolute、位置は top: -150px; left: -100px;（#stage ボックスの左上端を起点とした位

置）で指定します。width は 800px、height は 800px で指定します。

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

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

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

0%から 100%の間に transform: rotateZ(360deg);で時計回りに 360 度回転させます。

#universe2 > span:nth-child(1)要素（緑色のグラデーション）のスタイルを指定します。

#universe1 { top: -150px; left: -100px; width: 800px; height: 800px; position: absolute; background: radial-gradient (#000000, #CC0000 ); background: -webkit-radial-gradient( #000000, #CC0000 ); opacity: 0.6; } #universe2 { top: -150px; left: -100px; width: 800px; height: 800px; position: absolute;

animation: universe2Anime 20s ease-in-out 0s infinite alternate;

-webkit-animation: universe2Anime 20s ease-in-out 0s infinite alternate; } @keyframes universe2Anime { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } @-webkit-keyframes universe2Anime { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); } }

(17)

position は absolute、位置は top: -200px; left: -200px;（#universe2 ボックスの左上

端を起点とした位置）で指定します。width は 800px、height は 800px で指定します。

border-radius: 20px;で角を丸くします。背景を background: radial-gradient(closest-

side, rgba(0,102,102,0.6), rgba(0,102,102,0.0) );で緑色が中央から外側へ徐々に薄く

変化する円形グラデーションにします。

#universe2 > span:nth-child(2)要素（黄色のグラデーション）のスタイルを指定します。

position は absolute、位置は top: 300px; left: 300px;（#universe2 ボックスの左上端

を起点とした位置）で指定します。width は 500px、height は 500px で指定します。背景を

background: radial-gradient(closest-side, rgba(102,102,0,0.3), rgba(102,102,0,0.0)

);で黄色が中央から外側へ徐々に薄く変化する円形グラデーションにします。

#universe2 > span:nth-child(3)要素（赤色のグラデーション）のスタイルを指定します。

position は absolute、位置は top: -500px; left: 300px;（#universe2 ボックスの左上端

を起点とした位置）で指定します。width は 1000px、height は 1000px で指定します。

border-radius: 200px 0px / 100px 0px;で角を丸くします。背景を background: radial-

gradient(closest-side, rgba(255,0,0,0.6), rgba(255,0,0,0.0) );で赤色が中央から外

側へ徐々に薄く変化する円形グラデーションにします。

#universe2 > span:nth-child(1) { /* green */ top: -200px; left: -200px;

width: 800px; height: 800px; border-radius: 20px;

background: radial-gradient(closest-side, rgba(0,102,102,0.6), rgba(0,102,102,0.0) ); background: -webkit-radial-gradient(closest-side, rgba(0,102,102,0.6),

rgba(0,102,102,0.0) ); position: absolute;

}

#universe2 > span:nth-child(2) { /* yellow */ top: 300px; left: 300px;

width: 500px; height: 500px;

}

#universe2 > span:nth-child(3) { /* red */ top: -500px; left: 300px;

width: 1000px; height: 1000px; border-radius: 200px 0px / 100px 0px;

(18)

#universe2 > span:nth-child(4)要素（青色のグラデーション）のスタイルを指定します。

position は absolute、位置は top: 300px; left: -500px;（#universe2 ボックスの左上端

を起点とした位置）で指定します。width は 1200px、height は 1200px で指定します。

border-radius: 0px 200px / 0px 100px; で角を丸くします。背景を background:

radial-gradient(closest-side, rgba(0,0,255,0.5), rgba(0,0,255,0.0) );で青色が中央

から外側へ徐々に薄く変化する円形グラデーションにします。

上記の４色のグラデーションで宇宙の背景のもやもやとした感じを出しています。

#dotGroup1 要素（星グループ１）のスタイルを指定します。position は absolute、位置は

top: 0px; left: 0px;（#stage ボックスの左上端を起点とした位置）で指定します。width

は 600px、height は 500px で指定します。

以下は#dotGroup1 要素の子供要素（それぞれの星）の位置およびサイズの初期値と色等を

指定します。

#dot01 要素

（星 01）

から#dot12 要素

（星 12）

のスタイルを指定します。position は absolute、

位置は#dotGroup1 ボックスの左上端を起点とした位置で指定します。

#dotGroup1 { top: 0px; left: 0px; width: 600px; height: 500px; position: absolute; }

}

#universe2 > span:nth-child(4) { /* blue */ top: 300px; left: -500px;

width: 1200px; height: 1200px; border-radius: 0px 200px / 0px 100px;

(19)

© 2016 電脳 Papa 19 #dot01 { top: -10px; left: -10px; width: 5px; height: 5px; background-color: red; border-radius: 5px; position: absolute; } #dot02 { top: -120px; left: 250px; width: 20px; height: 20px; background-color: blue; border-radius: 20px; position: absolute; } #dot03 { top: -10px; left: 400px; width: 5px; height: 5px; background-color: gray; border-radius: 5px; position: absolute; } #dot04 { top: 20px; left: 600px; width: 15px; height: 15px; background-color: pink; border-radius: 15px; position: absolute; } #dot05 { top: 220px; left: 600px; width: 5px; height: 5px; background-color: orange; border-radius: 5px; position: absolute; } #dot06 { top: 600px; left: 800px; width: 25px; height: 25px; background-color: darkviolet; border-radius: 25px; position: absolute; } #dot07 { top: 500px; left: 500px; width: 10px; height: 10px; background-color: sandybrown; border-radius: 10px; position: absolute; } #dot08 { top: 700px; left: 100px;

(20)

#dotGroup2 要素（星グループ２）のスタイルを指定します。position は absolute、位置は

top: 0px; left: 0px;（#stage ボックスの左上端を起点とした位置）で指定します。width

は 600px、height は 500px で指定します。

#dotGroup2 要素の子供要素（それぞれの星）である#dot13 要素（星 13）から#dot24 要素

（星 24）は、#dotGroup1 要素の子供要素（それぞれの星）である#dot01 要素（星 01）か

ら#dot12 要素（星 12）の位置およびサイズの初期値と色等を同じ値で指定しています。そ

して#dotGroup2 要素を transform: rotateZ(180deg);で時計回りに 180 度回転させていま

す。#dotGroup1 要素の星とは上下逆にして、星が放射状に飛ぶようにしています。

（余りた

くさんの星のスタイルを決めるのが面倒だから逆にしてしまったという理由もあります。

ごめんなさい。でもアニメーションをみていただけば、これがなかなか旨くいっているの

が分かると思います。

）

width: 15px; height: 15px; background-color: green; border-radius: 15px; position: absolute; } #dot09 { top: 500px; left: 100px; width: 5px; height: 5px; background-color: yellow; border-radius: 5px; position: absolute; } #dot10 { top: 450px; left: -20px; width: 10px; height: 10px; background-color: cyan; border-radius: 10px; position: absolute; } #dot11 { top: 250px; left: -10px; width: 5px; height: 5px; background-color: magenta; border-radius: 5px; position: absolute; } #dot12 { top: 80px; left: -130px; width: 15px; height: 15px; background-color: lightgreen; border-radius: 15px; position: absolute; }

(21)

以下は#dotGroup2 要素の子供要素（それぞれの星）の位置およびサイズの初期値と色等を

指定します。

#dot13 要素

（星 13）

から#dot24 要素

（星 24）

のスタイルを指定します。position は absolute、

位置は#dotGroup2 ボックスの左上端を起点とした位置で指定します。

#dotGroup2 { top: 0px; left: 0px; width: 600px; height: 500px; position: absolute; transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); } #dot13 { top: -10px; left: -10px; width: 5px; height: 5px; background-color: red; border-radius: 5px; position: absolute; } #dot14 { top: -120px; left: 250px; width: 20px; height: 20px; background-color: blue; border-radius: 20px; position: absolute; } #dot15 { top: -10px; left: 400px; width: 5px; height: 5px; background-color: gray; border-radius: 5px; position: absolute; } #dot16 { top: 20px; left: 600px; width: 15px; height: 15px; background-color: pink; border-radius: 15px; position: absolute; } #dot17 { top: 220px; left: 600px; width: 5px; height: 5px; background-color: orange;

(22)

© 2016 電脳 Papa 22 border-radius: 5px; position: absolute; } #dot18 { top: 600px; left: 800px; width: 25px; height: 25px; background-color: darkviolet; border-radius: 25px; position: absolute; } #dot19 { top: 500px; left: 500px; width: 10px; height: 10px; background-color: sandybrown; border-radius: 10px; position: absolute; } #dot20 { top: 700px; left: 100px; width: 15px; height: 15px; background-color: green; border-radius: 15px; position: absolute; } #dot21 { top: 500px; left: 100px; width: 5px; height: 5px; background-color: yellow; border-radius: 5px; position: absolute; } #dot22 { top: 450px; left: -20px; width: 10px; height: 10px; background-color: cyan; border-radius: 10px; position: absolute; } #dot23 { top: 250px; left: -10px; width: 5px; height: 5px; background-color: magenta; border-radius: 5px; position: absolute; } #dot24 { top: 80px; left: -130px; width: 15px; height: 15px; background-color: lightgreen; border-radius: 15px; position: absolute; }

(23)

〔星がそれぞれ異なる速度で飛び広がる仕組み〕

#stage ボックスの中央（top: 250px; left: 300px;）からそれぞれの星の最初の位置へ一

定時間で戻す動きをさせているので、#stage ボックスの中央から遠くに位置する星は速く

動き、近くに位置する星は遅く動きます。

星を動かす技法として class セレクタを利用することで、多数の星を一気に動かします。

ここでは３つの class セレクタを使用して星を３パターンに分けて動かします。

class セレクタ.dots1 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 3s、イージングを ease-in、開始待ち時間を

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

#stage の中央 top: 250px; left: 300px; #stage の中心から遠くに位置する星は速く動く。 #stage の中心から近くに位置する星は遅く動く。 #stage の中心から遠くに位置する星は速く動く。 #stage の中心から近くに位置する星は遅く動く。 /* クラスを使用して、複数の星を一気に動かす。***************************/ .dots1 {

animation: dotsAnime 3s ease-in 0s infinite normal;

-webkit-animation: dotsAnime 3s ease-in 0s infinite normal; }

(24)

class セレクタ.dots2 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 3s、イージングを ease-in、開始待ち時間を

1s（注意）

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

class セレクタ.dots3 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 3s、イージングを ease-in、開始待ち時間を

2s 注意）

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

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

位置を top: 250px; left: 300px;、サイズを width: 0px; height: 0px;で指定し、opacity:

0.0;で見えないようにしておきます。1%で位置とサイズはそのままで、opacity: 0.8;に変

化させて見えるようにします。1%から 100%の間にそれぞれの星の元の位置、サイズに戻し、

opacity も元に戻します。

@keyframes dotsAnime {

0% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; } 1% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; } 100% { }

}

@-webkit-keyframes dotsAnime {

0% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; } 1% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; } 100% { }

} .dots2 {

.dots3 {

(25)

●星がブラックホールに吸い込まれるアニメーション

星が永久にブラックホールに吸い込まれ続けます。

【BlackHole の説明】

〔HTML の記述（BlackHole.html）

〕

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

id 属性 gravity1 の div 要素を記述し、その中に span 要素を５つ記述します。id 属性

gravity2 の div 要素を記述し、その中に span 要素を４つ記述します。

id 属性 dotGroup1 の div 要素を記述し、その中に id 属性 dot01 から dot12 の１２個の div

要素を記述します。１２個の div 要素に dots1、dots2、dots3 の順で class 属性を付けま

す。

id 属性 dotGroup2 の div 要素を記述し、その中に id 属性 dot13 から dot24 の１２個の div

要素を記述します。１２個の div 要素に dots3、dots1、dots2 の順で class 属性を付けま

す。

サンプルＣＳＳ３

<!DOCTYPE html> <html> <head> <title>BlackHole</title> <meta charset="UTF-8">

(26)

〔CSS の記述（BlackHole.css）

〕

#stage ステージのスタイルを指定します。width は 600px、height は 500px で指定します。

背景色を background: radial-gradient(#000000 5%, #111122 8%, #444488);で、中央を黒

色で周囲を暗い藍色で徐々に外側へ向かって薄い藍色に変化する円形グラデーションにし

ます。星がボックスからはみ出るので、overflow: hidden;を指定します。

#stage { width: 600px; height: 500px; background: radial-gradient(#000000 5%, #111122 8%, #444488); background: -webkit-radial-gradient(#000000 5%, #111122 8%, #444488); position: relative; overflow: hidden; } <div id="gravity2"><span></span><span></span><span></span><span></span> <span></span></div> <div id="dotGroup1">

(27)

●背景の重力場を描く

#gravity1 要素

（背景の放物線を描く重力線）

のスタイルを指定します。position は absolute、

位置は top: 0px; left: 0px;（#stage ボックスの左上端を起点とした位置）で指定します。

width は 600px、height は 500px で指定します。

#gravity1 > span:nth-child(1)要素（放物線を描く重力線１）のスタイルを指定します。

position は absolute、位置は top: -257px; left: -50px;（#gravity1 ボックスの左上端

を起点とした位置）で指定します。width は 700px、height は 500px で指定します。ボーダ

ーを border: 1px solid #666666; （薄い灰色）で指定し、border-radius: 50%;で楕円形

にします。背景色を background-color: transparent;（無色透明）にします。

#gravity1 > span:nth-child(2) 要素（放物線を描く重力線２）から #gravity1 >

span:nth-child(4) 要素（放物線を描く重力線４）のスタイルは #gravity1 >

span:nth-child(1)要素（放物線を描く重力線１）と top、left、width、height だけが違

います。

#gravity1 { top: 0px; left: 0px; width: 600px; height: 500px; position: absolute; } #gravity1 > span:nth-child(1) { top: -257px; left: -50px; width: 700px; height: 500px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity1 > span:nth-child(3) #gravity1 > span:nth-child(4) #gravity1 > span:nth-child(1) #gravity1 > span:nth-child(2) #gravity1 > span:nth-child(5) #gravity2 > span:nth-child(1) #gravity2 > span:nth-child(5) #gravity2 > span:nth-child(2) #gravity2 > span:nth-child(4) #gravity2 > span:nth-child(3)

(28)

#gravity1 > span:nth-child(5)要素（ブラックホールの中央）のスタイルを指定します。

position は absolute、位置は top: 229px; left: 275px;（#gravity1 ボックスの左上端を

起点とした位置）

で指定します。width は 50px、

height は 42px で指定します。

border-radius:

50%;で楕円形にします。背景色を background-color: #000000;（黒色）にします。

#gravity2 要素（背景の楕円形の重力線）のスタイルを指定します。position は absolute、

位置は top: 0px; left: 0px;（#stage ボックスの左上端を起点とした位置）で指定します。

width は 600px、height は 500px で指定します。

#gravity1 > span:nth-child(5) { top: 229px; left: 275px; width: 50px; height: 42px; border-radius: 50%; background-color: #000000; position: absolute; } #gravity2 { top: 0px; left: 0px; width: 600px; height: 500px; position: absolute; } #gravity1 > span:nth-child(2) { top: 257px; left: -50px; width: 700px; height: 500px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity1 > span:nth-child(3) { top: -665px; left: 150px; width: 300px; height: 900px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity1 > span:nth-child(4) { top: 265px; left: 150px; width: 300px; height: 900px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; }

(29)

#gravity2 > span:nth-child(1)要素（楕円形の重力線１）のスタイルを指定します。

position は absolute、位置は top: 21px; left: 25px;（#gravity2 ボックスの左上端を起

点とした位置）で指定します。width は 550px、height は 458px で指定します。ボーダーを

border: 1px solid #666666; （薄い灰色）で指定し、border-radius: 50%;で楕円形にし

ます。背景色を background-color: transparent;（無色透明）にします。

#gravity2 > span:nth-child(2) 要素（楕円形の重力線２）から #gravity2 >

span:nth-child(5)要素（楕円形の重力線５）のスタイルは#gravity2 > span:nth-child(1)

要素（楕円形の重力線１）と top、left、width、height だけが違います。

#gravity2 > span:nth-child(1) { top: 21px; left: 25px; width: 550px; height: 458px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity2 > span:nth-child(2) { top: 125px; left: 150px; width: 300px; height: 250px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity2 > span:nth-child(3) { top: 188px; left: 225px; width: 150px; height: 125px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity2 > span:nth-child(4) { top: 208px; left: 250px; width: 100px; height: 83px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; } #gravity2 > span:nth-child(5) { top: 225px; left: 270px; width: 60px; height: 50px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; position: absolute; }

(30)

#dotGroup1 要素（星グループ１）およびその子供要素である#dot01 要素（星 01）から#dot12

要素（星 12）のスタイルは前述のサンプルＣＳＳ２の WarpDots.css と同じです。

#dotGroup2 要素（星グループ２）およびその子供要素である#dot13 要素（星 13）から#dot24

要素（星 24）のスタイルも前述のサンプルＣＳＳ２の WarpDots.css と同じです。

class セレクタ.dots1 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 3s、イージングを ease-in、開始待ち時間を

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

class セレクタ.dots2 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 3s、イージングを ease-in、開始待ち時間を

1s（注意）

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

class セレクタ. .dots3 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 3s、イージングを ease-in、開始待ち時間を

2s（注意）

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

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

ら 99%の間にそれぞれの星の位置を最初の位置から top: 250px; left: 300px;に、サイズ

を最初のサイズから width: 0px; height: 0px;に、opacity: 1.0;から opacity: 0.8;に変

化させます。99%から 100%の間に位置とサイズはそのままで、opacity: 0.0;に変化させて

見ないようにします。

/* クラスを使用して、複数の星を一気に動かす。***************************/ .dots1 {

.dots2 {

.dots3 {

(31)

●泡が湧き出てくるアニメーション

泡がプクプクと永久に湧き出てきます。

【Bubbles の説明】

〔HTML の記述（Bubbles.html）

〕

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

id 属性 dotGroup1 の div 要素を記述し、その中に id 属性 dot01 から dot12 の１２個の div

要素を記述します。１２個の div 要素に class 属性 dots1 を付けます。

id 属性 dotGroup2 の div 要素を記述し、その中に id 属性 dot13 から dot24 の１２個の div

要素を記述します。１２個の div 要素に class 属性 dots2 を付けます。

@keyframes dotsAnime { 0% { }

99% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; } 100% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; } }

@-webkit-keyframes dotsAnime { 0% { }

99% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; } 100% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; } }

(32)

〔CSS の記述（Bubbles.css）

〕

#stage ステージのスタイルを指定します。width は 600px、height は 500px で指定します。

ボーダーを border: 1px solid orange;（オレンジ色）で指定します。背景色を background:

radial-gradient(white 5%, yellow 70%, orange 150%);で中央が白色、外側に向かって

黄色からオレンジ色へ変化する円形グラデーションにします。泡がボックスからはみ出る

ので、overflow: hidden;を指定します。

<!DOCTYPE html> <html> <head> <title>Bubbles</title> <meta charset="UTF-8">

<body>

<p>■class セレクタを活用して、泡立ちを作る。</p> <div id="stage">

(33)

#dotGroup1 要素（泡グループ１）のスタイルを指定します。position は absolute、位置は

top: 0px; left: 0px;（#stage ボックスの左上端を起点とした位置）で指定します。width

は 600px、height は 500px で指定します。

以下は#dotGroup1 要素の子供要素（それぞれの泡）の位置およびサイズの初期値と色等を

指定します。

#dot01 要素

（泡 01）

から#dot12 要素

（泡 12）

のスタイルを指定します。position は absolute、

位置は#dotGroup1 ボックスの左上端を起点とした位置で指定します。

#stage {

width: 600px; height: 500px; border: 1px solid orange;

background: radial-gradient(white 5%, yellow 70%, orange 150%);

background: -webkit-radial-gradient(white 5%, yellow 70%, orange 150%); position: relative; overflow: hidden; } #dotGroup1 { top: 0px; left: 0px; width: 600px; height: 500px; position: absolute; } #dot01 { top: -82px; left: -60px; width: 80px; height: 80px; border: solid 2px #FF9900; border-radius: 40px; position: absolute; } #dot02 { top: -320px; left: 300px; width: 240px; height: 240px; border: solid 3px #FFCC66; border-radius: 120px; position: absolute; } #dot03 { top: -52px; left: 600px; width: 50px; height: 50px; border: solid 1px #FF6666; border-radius: 25px; position: absolute; }

(34)

© 2016 電脳 Papa 34 #dot04 { top: 50px; left: 600px; width: 30px; height: 30px; border: solid 1px #CC6600; border-radius: 15px; position: absolute; } #dot05 { top: 200px; left: 620px; width: 80px; height: 80px; border: solid 2px #FF9900; border-radius: 40px; position: absolute; } #dot06 { top: 500px; left: 700px; width: 50px; height: 50px; border: solid 1px #FFCC66; border-radius: 25px; position: absolute; } #dot07 { top: 500px; left: 400px; width: 20px; height: 20px; border: solid 1px #FF6666; border-radius: 10px; position: absolute; } #dot08 { top: 650px; left: 110px; width: 100px; height: 100px; border: solid 1px #CC6600; border-radius: 50px; position: absolute; } #dot09 { top: 500px; left: 100px; width: 20px; height: 20px; border: solid 1px #FF9900; border-radius: 10px; position: absolute; } #dot10 { top: 460px; left: -40px; width: 40px; height: 40px; border: solid 1px #FFCC66; border-radius: 20px; position: absolute; }

(35)

#dotGroup2 要素（泡グループ２）のスタイルを指定します。position は absolute、位置は

top: 0px; left: 0px;（#stage ボックスの左上端を起点とした位置）で指定します。width

は 600px、height は 500px で指定します。

#dotGroup2 要素の子供要素（それぞれの泡）である#dot13 要素（泡 13）から#dot24 要素

（泡 24）は、#dotGroup1 要素の子供要素（それぞれの泡）である#dot01 要素（泡 01）か

ら#dot12 要素（泡 12）の位置およびサイズの初期値と色等を同じ値で指定しています。そ

して#dotGroup2 要素を transform: rotateZ(180deg);で時計回りに 180 度回転させていま

す。#dotGroup1 要素の泡とは上下逆にして、泡が放射状に動くようにしています。

（余りた

くさんの泡のスタイルを決めるのが面倒だから逆にしてしまったという理由もあります。

ごめんなさい。でもアニメーションをみていただけば、これがなかなか旨くいっているの

が分かると思います。

）

以下は#dotGroup2 要素の子供要素（それぞれの泡）の位置およびサイズの初期値と色等を

指定します。

#dot13 要素

（泡 13）

から#dot24 要素

（泡 24）

のスタイルを指定します。position は absolute、

位置は#dotGroup2 ボックスの左上端を起点とした位置で指定します。

#dot11 { top: 250px; left: -35px; width: 30px; height: 30px; border: solid 1px #FF6666; border-radius: 15px; position: absolute; } #dot12 { top: 140px; left: -150px; width: 50px; height: 50px; border: solid 1px #CC6600; border-radius: 25px; position: absolute; } #dotGroup2 { top: 0px; left: 0px; width: 600px; height: 500px; position: absolute; transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); }

(36)

© 2016 電脳 Papa 36 #dot13 { top: -82px; left: -60px; width: 80px; height: 80px; border: solid 2px #FF9900; border-radius: 40px; position: absolute; } #dot14 { top: -320px; left: 300px; width: 240px; height: 240px; border: solid 3px #FFCC66; border-radius: 120px; position: absolute; } #dot15 { top: -52px; left: 600px; width: 50px; height: 50px; border: solid 1px #FF6666; border-radius: 25px; position: absolute; } #dot16 { top: 50px; left: 600px; width: 30px; height: 30px; border: solid 1px #CC6600; border-radius: 15px; position: absolute; } #dot17 { top: 200px; left: 620px; width: 80px; height: 80px; border: solid 2px #FF9900; border-radius: 40px; position: absolute; } #dot18 { top: 500px; left: 700px; width: 50px; height: 50px; border: solid 1px #FFCC66; border-radius: 25px; position: absolute; } #dot19 { top: 500px; left: 400px; width: 20px; height: 20px; border: solid 1px #FF6666; border-radius: 10px; position: absolute; }

(37)

泡を動かす技法として class セレクタを利用することで、多数の泡を一気に動かします。

ここでは２つの class セレクタを使用して泡を２パターンに分けて動かします。

class セレクタ.dots1 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 5s、イージングを ease-in、開始待ち時間を

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

#dot20 { top: 650px; left: 110px; width: 100px; height: 100px; border: solid 1px #CC6600; border-radius: 50px; position: absolute; } #dot21 { top: 500px; left: 100px; width: 20px; height: 20px; border: solid 1px #FF9900; border-radius: 10px; position: absolute; } #dot22 { top: 460px; left: -40px; width: 40px; height: 40px; border: solid 1px #FFCC66; border-radius: 20px; position: absolute; } #dot23 { top: 250px; left: -35px; width: 30px; height: 30px; border: solid 1px #FF6666; border-radius: 15px; position: absolute; } #dot24 { top: 140px; left: -150px; width: 50px; height: 50px; border: solid 1px #CC6600; border-radius: 25px; position: absolute; } /* クラスを使用して、複数の泡を一気に動かす。***************************/ .dots1 {

-webkit-animation: dots1Anime 5s ease-in 0s infinite normal; }

(38)

class セレクタ.dots2 に属する要素のアニメーションの指定をします。

アニメーション名を dotsAnime、実行時間を 6s、イージングを ease-in、開始待ち時間を

2.5s（注意）

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

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

位置を top: 250px; left: 305px;、サイズを width: 0px; height: 0px;で指定し、opacity:

0.5;で半透明にしておきます。0%から 100%の間にそれぞれの泡の元の位置、サイズに戻し、

opacity も元に戻します。

@keyframes dotsAnime {

0% { top: 250px; left: 305px; width: 0px; height: 0px; opacity: 0.5; } 100% { }

}

@-webkit-keyframes dotsAnime {

0% { top: 250px; left: 305px; width: 0px; height: 0px; opacity: 0.5; } 100% { }

} .dots2 {

animation: dotsAnime 6s ease-in 2.5s infinite normal;

-webkit-animation: dotsAnime 6s ease-in 2.5s infinite normal; }

(39)

●角丸四角形のワープアニメーション

角丸四角形が次々と永久に湧き出てきます。

【WarpRects の説明】

〔HTML の記述（WarpRects.html）

〕

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

id 属性 rectGroup の div 要素を記述し、

その中に class 属性 rect、

id 属性 rect01 から rect24

の２４個の div 要素を記述します。

サンプルＣＳＳ５

<!DOCTYPE html> <html> <head> <title>WarpRects</title> <meta charset="UTF-8">

<body>

<p>■class セレクタを活用して、角丸四角形のワープ状態を作る。</p> <div id="stage">

1346-9 応用２ Class Selector

たくさんの要素を一気に動かす魔法の CSS でアニメーションを作ってみましょう。

動かす要素がたくさんあって全て同じような動きをするアニメーションの場合には、クラ

スセレクタを使うと一気に動かすことができます。

〔id セレクタと class セレクタ〕

ここで id セレクタと class セレクタの復習をしましょう。

■

id セレクタ

#id 名 { プロパティ名: 値; }

HTML 文書で id 属性（ id=" " ）によって id 名が付けられた要素（タグと考えるとよい

でしょう）を対象にスタイルが適用されます。１つの HTML 文書内では同一 id 名称を重複

して使用することはできません。

ですから、複数の要素にアニメーションで同一のプロパティを指定する（つまり同じ変化

をさせる）ような場合に、それぞれの要素に id 属性で id 名を指定している場合には、CSS

の id セレクタごとにアニメーションでプロパティを指定する必要があります。

■

class セレクタ

.class 名 { プロパティ名: 値; }

HTML 文書で class 属性（ class=" " ）によって class 名が付けられた要素（タグと考え

るとよいでしょう）を対象にスタイルが適用されます。class 属性は id 属性と違って１つ

の HTML 文書内で同一 class 名称を重複して使用することができるので、複数の要素に同一

class 名を指定してスタイルを適用することができます。異なる要素に対して同一 class 名

を指定することもできます。

ですから、複数の要素にアニメーションで同一のプロパティを指定する（つまり同じ変

化をさせる）ような場合に、それぞれの要素に class 属性で同一 class 名を指定して、CSS

の class セレクタにアニメーションでプロパティを指定すれば、要素毎にプロパティを指

定しなくても、同一プロパティが適用されます。

≪セレクタの優先順位について≫

１つの要素に要素型セレクタ、id セレクタ、class セレクタの３つを指定し、それぞれの

セレクタに同一のプロパティを異なった値で指定すると、次の優先順位でプロパティの値

が適用されます。

●セレクタの優先順位（ 高 ＞ 低 ）

id セレクタ ＞ class セレクタ ＞ 要素型セレクタ

詳しくは「1222-B Transform Using Class And Tag （class セレクタと要素型セレクタ（Tag）

を使用してスタイルを適用する）」を参照してください。

●UFO が突然出現して回転するアニメーション

UFO が一点から出現して回転を繰り返し、また消失します。

【RollingUFOs の説明】

〔HTML の記述（RollingUFOs.html）

〕

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

id 属性 rotateRect の div 要素を記述し、その中に class 属性 circle および id 属性 UFOs

の div 要素を記述します。

class 属性 circle および id 属性 UFOs の div 要素の中に、class 属性 circle の８個の div

要素を記述します。

〔CSS の記述（RollingUFOs.css）

〕

#stage ステージのスタイルを指定します。width は 600px、height は 500px で指定します。

背景色を background-color: black;（黒色）で指定します。目には見えませんが UFO が回

転する時に要素の一部が#stage ボックスからはみ出るようなので、overflow: hidden;を指

定します。

#rotateRect 要素

（縦横回転するボックス）のスタイルを指定します。

position は absolute、

位置は top: 210px; left: 260px;（#stage ボックスの左上端を起点とした位置）で指定し

ます。width は 80px、height は 80px で指定します。

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

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

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

0% か ら 25% の 間 は そ の ま ま で 、 25% か ら 75% の 間 に transform: rotateX(360deg)

rotateY(360deg);で X 軸の正方向から見て時計回りに 360 度、Y 軸の正方向から見て時計回

りに 360 度回転させます。75%から 100%の間はそのままにします。

0%から 25%の間は UFO が展開する時間、75%から 100%の間は UFO が収束する時間なので回転

させないようにしています。

.circle 要素のスタイルを指定します。ここでは class セレクタを使ってすべての FUO の共

通スタイルを指定します。position は absolute、位置は top: 0px; left: 0px;で指定しま

す。

（注：#UFOs の div 要素は#rotateRect ボックスの左上端を起点とした位置で、#UFOs の

子供の div 要素は#UFOs ボックスの左上端を起点とした位置になります。

）width は 80px、

height は 80px で指定します。border-radius: 10px;で角丸四角形にしておきます。

#UFOs 要素（８個の UFO の中心に位置する親 UFO）のスタイルを指定します。背景色を

background-color: cyan;（シアン色）にします。最初は見えないように opacity: 0.0;と

指定しておきます。opacity プロパティは子孫に継承されるので子供の UFO も最初は見えま

せん。

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

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

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

ら 25%の間に opacity: 1.0;に変化させ見えるようにします。ここで子供の UFO も見えるよ

うになります。border-radius: 80px;に変化させて円形にします。25%から 75%の間に円形

●セレクタの優先順位（高＞低）

id セレクタ＞ class セレクタ＞要素型セレクタ

0% から 25% の間はそのままで、 25% から 75% の間に transform: rotateX(360deg)

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

に見えます。 25% から 75% の間はそのままです。 75% から 100% の間に transform:

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform:

から 25% の間に border-radius: 80px; に変化させて円形にします。また transform: