大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

(1)

1337-1 メニューのアニメーション（１）

animation プロパティを利用して、メニューの中でアニメーションを動かしてみましょう。

メニューを工夫することでひときわ光る web ページにすることができます。もう Flash で

アニメーションを作る必要はありません。JavaScript でスクリプトを書く必要もありませ

ん。

〔メニューバーの中を動くアニメーション〕

メニューバーの中に太陽系宇宙を入れてみました。星がまたたく宇宙空間を宇宙船スペー

スシャトルとＵＳＳエンタープライズ号が飛び交う楽しいメニューバーです。

サンプルＣＳＳ１

(2)

大メニューをマウスカーソルで hover すると、

半透明の小メニューが上から伸びてきます。

小メニューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenuAnime01 の説明】

〔HTML の記述（NaviMenuAnime01.html）

〕

id 属性 menu-box の div 要素を作り、

その中にメニューバーの背景に表示する星空用の span

要素、地球・月・土星の画像の img 要素、宇宙船スペースシャトルとＵＳＳエンタープラ

イズ号の画像の img 要素および ul 要素と li 要素でリストを記述します。 <a

href="#">MENU1</a>の href="#"は、a 要素には必ず href 属性を指定しなければならないの

で、大メニューをクリックしても他へジャンプしないでページの先頭へ跳ぶように"#"と指

定しています。もちろんここへ#ではなく URL を記述すれば、その URL へジャンプすること

ができます。

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

(3)

© 2016 電脳 Papa 3 <ul> <li><a href="#">MENU1</a> <ul> <li><a href="linkPages/page1_1.html">PAGE1_1</a></li> <li><a href="linkPages/page1_2.html">PAGE1_2</a></li> <li><a href="linkPages/page1_3.html">PAGE1_3</a></li> </ul> </li> <li><a href="#">MENU2</a> <ul> <li><a href="linkPages/page2_1.html">PAGE2_1</a></li> <li><a href="linkPages/page2_2.html">PAGE2_2</a></li> <li><a href="linkPages/page2_3.html">PAGE2_3</a></li> <li><a href="linkPages/page2_4.html">PAGE2_4</a></li> </ul> </li> <li><a href="#">MENU3</a> <ul> <li><a href="linkPages/page3_1.html">PAGE3_1</a></li> <li><a href="linkPages/page3_2.html">PAGE3_2</a></li> <li><a href="linkPages/page3_3.html">PAGE3_3</a></li> <li><a href="linkPages/page3_4.html">PAGE3_4</a></li> <li><a href="linkPages/page3_5.html">PAGE3_5</a></li> </ul> </li> <li><a href="#">MENU4</a> <ul> <li><a href="linkPages/page4_1.html">PAGE4_1</a></li> <li><a href="linkPages/page4_2.html">PAGE4_2</a></li> <li><a href="linkPages/page4_3.html">PAGE4_3</a></li> <li><a href="linkPages/page4_4.html">PAGE4_4</a></li> </ul> </li> </ul> </div>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>    あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br>

(4)

〔CSS の記述（NaviMenuAnime01.css）

〕

先ず id 名が#menu-box の div 要素のスタイルを指定します。この本で紹介しているほかの

アニメーションで使用している id 名が#stage の div 要素と同じものですが、ボタンやメニ

ューで使用していることを分かり易くするために#menu-box という id 名を付けています。

つぎに#menu-box と同じサイズの#anime-box を指定し、その背景にまたたく星・惑星の画

像を表示し、その中でスペースシャトル・宇宙船ＵＳＳエンタープライズ号の画像のアニ

メーションを動かします。

#anime-box は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#menu-box

に重ねます。

〔背景にまたたく星のアニメーションを表示する〕

３つの画像を次々と表示して、星がまたたくように見せます。

Stars3 50X50.png Stars4-1 50X50.png Stars4-2 50X50.png

#anime-box と同じサイズの #stars-0 ボックスを指定し、その background-image に

#menu-box { margin: 10px 0px 10px 15px; width: 765px; height: 52px; position: relative; } </body> </html> /* 背景アニメーション ************************************************************/ #anime-box { top: 0px; left: 0px; width: 765px; height: 52px; position: absolute; overflow: hidden; }

(5)

images/Stars3 50X50.png を background-repeat: repeat;で敷きつめて表示します。

#stars-0 は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#anime-box

に重ねます。

次に#anime-box と同じサイズの#stars-1 ボックスを指定し、その background-image に

images/Stars4-1 50X50.png を background-repeat: repeat;で敷きつめて表示します。

#stars-0 は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#stars-0 ボ

ックスに重ねます。opacity: 1.0;と指定して見えるようにしておきます。

ボックスはアニメーション名を stars1Anime、実行時間を 1s、イージングを linear、開始

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

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

opacity: 1.0;から opacity: 0.0;に変更して、見えないようにします。

#stars-0 { top: 0px; left: 0px; width: 765px; height: 52px; position: absolute; background-image: url("images/Stars3 50X50.png"); background-repeat: repeat; background-origin: border-box; background-clip: border-box; opacity: 1.0; } #stars-1 { top: 0px; left: 0px; width: 765px; height: 52px; position: absolute; background-image: url("images/Stars4-1 50X50.png"); background-repeat: repeat; background-origin: border-box; background-clip: border-box; opacity: 1.0;

animation: stars1Anime 1s linear 0s infinite alternate;

-webkit-animation: stars1Anime 1s linear 0s infinite alternate; }

@keyframes stars1Anime { 0% { }

100% { opacity: 0.0; } }

(6)

次に#anime-box と同じサイズの#stars-2 ボックスを指定し、その background-image に

images/Stars4-2 50X50.png を background-repeat: repeat;で敷きつめて表示します。

#stars-0 は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#stars-0 ボ

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

ボックスはアニメーション名を stars2Anime、実行時間を 1s、イージングを linear、開始

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

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

opacity: 0.0;から opacity: 1.0;に変更して、見えるようにします。

〔惑星の画像を表示する〕

地球の画像（images/Earth1.png）を入れる#earth ボックスを記述します。position は

absolute にして、位置は top -10px と left -50px（#anime-box ボックスの左上端を基準と

#stars-2 { top: 0px; left: 0px; width: 765px; height: 52px; position: absolute; background-image: url("images/Stars4-2 50X50.png"); background-repeat: repeat; background-origin: border-box; background-clip: border-box; opacity: 0.0;

animation: stars2Anime 1s linear 0s infinite alternate;

-webkit-animation: stars2Anime 1s linear 0s infinite alternate; } @keyframes stars1Anime { 0% { } 100% { opacity: 0.0; } } @-webkit-keyframes stars1Anime { 0% { } 100% { opacity: 0.0; } } @-webkit-keyframes stars1Anime { 0% { } 100% { opacity: 0.0; } }

(7)

した位置）で指定します。width: 200px; height: 200px;と指定します。

月の画像（images/Moon.png）を入れる#earth ボックスを記述します。position は absolute

にして、位置は top 5px と left 500px（#anime-box ボックスの左上端を基準とした位置）

で指定します。width: 55px; height: 55px;と指定します。

土星の画像（images/Saturn2 53X100.png）を入れる#earth ボックスを記述します。position

は absolute にして、位置は top 15px と left 720px（#anime-box ボックスの左上端を基準

とした位置）で指定します。width: 30px; height: 16px;と指定します。

〔飛び交う宇宙船のアニメーションを表示する〕

スペースシャトルの画像（images/SpaceShuttle.png）を入れる#shuttle ボックスを記述し

ます。position は absolute にして、位置は top 5px と left -40px（#anime-box ボックス

の左上端を基準とした位置）で指定します。width: 32px; height: 18px;と指定します。

ボックスはアニメーション名を shuttleAnime、実行時間を 20s、イージングを linear、開

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

#earth { top: -10px; left: -50px; width: 200px; height: 200px; position: absolute; } #moon { top: 5px; left: 500px; width: 55px; height: 55px; position: absolute; } #saturn { top: 15px; left: 720px; width: 30px; height: 16px; position: absolute; } #shuttle { top: 5px; left: -40px; width: 32px; height: 18px; border: none; position: absolute;

(8)

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

#anime-box の top: 5px;の位置から transform プロパティの treanslateX( )関数でＸ方向

へ#anime-box の右側へ飛び出すまで 810px 移動し、

飛び出したら top: 5px;の位置から top:

30px;へ移し、rotateZ( )関数で時計回りに 180 度回転しスペースシャトルの画像を左右反

転させます。左右反転したまま#anime-box の左側へ飛び出すまで 810px 戻します。これに

よりスペースシャトルが宇宙空間を左右に飛び回るように見えます。

ＵＳＳエンタープライズ号の画像（images/USS-Enterprise.png）を入れる#enterprise ボ

ックスを記述します。position は absolute にして、位置は top 30px と left 770px

（#anime-box ボックスの左上端を基準とした位置）で指定します。width: 32px; height:

16px;と指定します。Transform プロパティの rotateZ( )関数で時計回りに 180 度回転しス

ＵＳＳエンタープライズ号の画像を左右反転させておきます。

ボックスはアニメーション名を enterpriseAnime、実行時間を 20s、イージングを linear、

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

#enterprise { top: 30px; left: 770px; width: 32px; height: 16px; border: none; position: absolute; @keyframes shuttleAnime { 0% { }

49% { top: 5px; transform: translateX(810px); }

51% { top: 30px; transform: translateX(810px) rotateZ(180deg); } 100% { top: 30px; transform: rotateZ(180deg); }

}

@-webkit-keyframes shuttleAnime { 0% { }

49% { top: 5px; -webkit-transform: translateX(810px); }

51% { top: 30px; -webkit-transform: translateX(810px) rotateZ(180deg); } 100% { top: 30px; -webkit-transform: rotateZ(180deg); }

}

animation: shuttleAnime 20s linear 0s infinite normal;

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

(9)

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

#anime-box の top: 30px;の位置から transform プロパティの treanslateX( )関数でＸ方向

へ#anime-box の左側へ飛び出すまで-810px 移動し、飛び出したら top: 30px;の位置から

top: 5px;へ移し、rotateZ( )関数で時計回りに 180 度回転していたＵＳＳエンタープライ

ズ号の画像を基へ戻すことで左右反転させます。左右反転したまま#anime-box の右側へ飛

び出すまで 810px 戻します。これによりＵＳＳエンタープライズ号が宇宙空間を左右に飛

び回るように見えます。

次に大メニューの ul 要素のスタイルを指定します。大メニュー項目３つを入れる枠になり

ます。#menu-box>ul としているのは、ul 要素は HTML 文書の中ではほかの場所でも記述さ

れるので、#menu-box の中の ul 要素に限定し、しかも、

「>」を付けることにより、#menu-box

の子供の ul 要素（大メニューの ul 要素）に限定してスタイルを指定するためです。

#menu-box の孫の ul 要素（小メニューの ul 要素）には影響しません。ul 要素は li 要素を

入れる領域として使用するので、次の指定をします。

① margin: 0px; padding: 0px; → ul 要素はこの指定をしないと margin と padding

の余白が自動的にとられてしまいます。

② list-style-type: none; → ul 要素の下に配置される各 li 要素のテキストの先頭

に“・”などのマークが付くのを防ぐために指定します。

③border-right: 1px solid #999999;と指定しているのは、li 要素（大メニュー項目）

@keyframes enterpriseAnime {

0% { }

49% { top: 30px; transform: translateX(-810px) rotateZ(180deg); } 51% { top: 5px; transform: translateX(-810px) rotateZ(0deg); } 100% { top: 5px; transform: rotateZ(0deg); }

}

@-webkit-keyframes enterpriseAnime { 0% { }

49% { top: 30px; -webkit-transform: translateX(-810px) rotateZ(180deg); } 51% { top: 5px; -webkit-transform: translateX(-810px) rotateZ(0deg); } 100% { top: 5px; -webkit-transform: rotateZ(0deg); }

}

transform: rotateZ(180deg);

-webkit-transform: rotateZ(180deg);

animation: enterpriseAnime 20s linear 0s infinite normal;

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

(10)

同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: none; の指定

をしているので、バーのいちばん右側のボーダー幅が 0px にならないように、ul 要

素の右側のボーダー幅を 1px で指定しています。

④小メニューが伸びた時に、#menu-box の div 要素以降に記述されている HTML のコンテ

ンツ（テキストや画像等）が動くのを防ぐために、#menu-box>ul（大メニューの ul）

を position: absolute; と指定し、#menu-box に対する絶対位置としてあります。

なお、右側にコメントが付いているところがありますが、実際にスタイルシートにコード

を記述する際には、コメントは記述しなくてもかまいません。

大メニューの li 要素のスタイルを指定します。#menu-box>ul>li としているのは、#menu-box

の子供の ul 要素（大メニューの ul 要素）の子供の li 要素（大メニュー項目）に限定して

スタイルを指定するためです。#menu-box の孫の ul 要素（小メニューの ul 要素）の子供

の li 要素（小メニュー項目）には影響しません。大メニュー項目を横に並べたいので float:

left;の指定をしています。

li 要素に表示する a 要素のテキストのスタイルを指定します。テキストにデコレーション

（飾り）が付かないように text-decoration: none;の指定をします。text-decoration:

none;がないと、テキストにアンダーラインが付いたり、リンク済みのテキストカラーに変

わったりします。ボーダーを border: 1px solid #999999;で指定していますが、li 要素（大

メニュー項目）同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: none;

の指定をしています。テキストの色を赤色で、text-shadow プロパティでテキストの周りを

白い影で囲んでいます。

/* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 764px; height: 52px; border-right: solid 1px #999999; list-style-type: none; position: absolute; /* 小メニューが伸びたときに、以降の HTML のコンテンツが動くのを防止するために必要 */ } #menu-box>ul>li { width: 191px; /* 大メニューの幅 */ float: left; /* 大メニューを横に並べる。 */ }

(11)

次に小メニューの ul 要素のスタイルを指定します。大メニュー項目を hover した時に下に

伸びる小メニュー項目の枠になります。margin-top: -52px;と指定しているのは、小メニ

ューの枠を大メニュー項目に重ねておくためです。重ねておかないと大メニューの下側の

はずれた部分を hover しても小メニューが伸びてしまいます。opacity: 0.0;と指定して見

えないようにしておきます。

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。margin-top: 0px;と指定して大メニュー項目に重ねていた小メニューの枠

を大メニュー項目の下に移動し、opacity: 1.0;と指定して、見えるようにします。

小メニュー項目の li 要素の指定をします。height: 0px;と opacity: 0.0; を指定して見え

ないようにしておきます。li 要素を徐々に高さが増して目に見えるように変化させるため、

transition の指定をします。0.5 秒で ease-in-out で変化するようにしています。

#menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; border: 1px solid #999999; border-right: none; /* 大メニューの左右のボーダーを重ねる。 */ text-align: center; font-size: 26px;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #FF0000; text-shadow: 2px 2px 2px #FFFFFF, -2px -2px 2px #FFFFFF, 2px -2px 2px #FFFFFF, -2px 2px 2px #FFFFFF; line-height: 50px; display: block; } /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる。 */ height: 52px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする。 */ } #menu-box>ul>li:hover ul { /* この変化には transition を指定せず、瞬時に変化させる。 */ margin-top: 0px; /* 小メニューを大メニューの下の位置に移動する。 */ opacity: 1.0; /* 小メニューを可視にする。 */ }

(12)

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま

す。height: 51px;と opacity: 0.8; を指定して、li 要素を徐々に高さが増して目に見え

るように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。width: 100%; height: 100%;

と指定することにより、li の幅と高さと同じになります。しかも height: 100%;の指定に

より、li の高さが徐々に高くなるのに合わせて a 要素の高さも変化します。背景色を

background-color: rgba(255, 255, 255, 0.5);で白色の半透明にしています。ボーダーを

border: 1px solid #999999;で指定していますが、li 要素（小メニュー項目）同士の間の

上下のボーダー幅を 1px にしたいため、

li 要素に border-top: none; の指定をしています。

overflow: hidden;と outline: none;を指定しているのは、Firefox ブラウザの場合にリン

ク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです。

#menu-box ul ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #999999; border-top: none; /* 小メニューの上下のボーダーを重ねる。 */ text-align: center;

text-overflow: clip; /* テキストの overflow 時は、カットする */ font-size: 26px;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; } #menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの高を変え、可視にする */ height: 51px; opacity: 1.0; } #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 190px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; }

(13)

li 要素が hover された時の a 要素の変化を指定します。

背景色を background-color: rgba(0,

0, 0, 0.5);で黒色の半透明に、テキストの色を白色 #FFFFFF に変化させます。

#menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色とテキストの色を変える */

background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF;

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

1337-1 メニューのアニメーション（１）

animation プロパティを利用して、メニューの中でアニメーションを動かしてみましょう。

メニューを工夫することでひときわ光る web ページにすることができます。もう Flash で

アニメーションを作る必要はありません。JavaScript でスクリプトを書く必要もありませ

ん。

〔メニューバーの中を動くアニメーション〕

メニューバーの中に太陽系宇宙を入れてみました。星がまたたく宇宙空間を宇宙船スペー

スシャトルとＵＳＳエンタープライズ号が飛び交う楽しいメニューバーです。

サンプルＣＳＳ１

大メニューをマウスカーソルで hover すると、

半透明の小メニューが上から伸びてきます。

小メニューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenuAnime01 の説明】

〔HTML の記述 （NaviMenuAnime01.html）

〕

id 属性 menu-box の div 要素を作り、

その中にメニューバーの背景に表示する星空用の span

要素、地球・月・土星の画像の img 要素、宇宙船スペースシャトルとＵＳＳエンタープラ

イ ズ 号 の 画 像 の img 要 素 お よ び ul 要 素 と li 要 素 で リ ス ト を 記 述 し ま す 。 <a

href="#">MENU1</a>の href="#"は、a 要素には必ず href 属性を指定しなければならないの

で、大メニューをクリックしても他へジャンプしないでページの先頭へ跳ぶように"#"と指

定しています。もちろんここへ#ではなく URL を記述すれば、その URL へジャンプすること

ができます。

〔CSS の記述（NaviMenuAnime01.css）

〕

先ず id 名が#menu-box の div 要素のスタイルを指定します。この本で紹介しているほかの

アニメーションで使用している id 名が#stage の div 要素と同じものですが、ボタンやメニ

ューで使用していることを分かり易くするために#menu-box という id 名を付けています。

つぎに#menu-box と同じサイズの#anime-box を指定し、その背景にまたたく星・惑星の画

像を表示し、その中でスペースシャトル・宇宙船ＵＳＳエンタープライズ号の画像のアニ

メーションを動かします。

#anime-box は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#menu-box

に重ねます。

〔背景にまたたく星のアニメーションを表示する〕

３つの画像を次々と表示して、星がまたたくように見せます。

Stars3 50X50.png Stars4-1 50X50.png Stars4-2 50X50.png

#anime-box と 同 じ サ イ ズ の #stars-0 ボ ッ ク ス を 指 定 し 、 そ の background-image に

images/Stars3 50X50.png を background-repeat: repeat;で敷きつめて表示します。

#stars-0 は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#anime-box

に重ねます。

次に#anime-box と同じサイズの#stars-1 ボックスを指定し、その background-image に

images/Stars4-1 50X50.png を background-repeat: repeat;で敷きつめて表示します。

#stars-0 は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#stars-0 ボ

ックスに重ねます。opacity: 1.0;と指定して見えるようにしておきます。

ボックスはアニメーション名を stars1Anime、実行時間を 1s、イージングを linear、開始

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

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

opacity: 1.0;から opacity: 0.0;に変更して、見えないようにします。

次に#anime-box と同じサイズの#stars-2 ボックスを指定し、その background-image に

images/Stars4-2 50X50.png を background-repeat: repeat;で敷きつめて表示します。

#stars-0 は top: 0px; left: 0px;、width: 765px; height: 52px;と指定し、#stars-0 ボ

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

ボックスはアニメーション名を stars2Anime、実行時間を 1s、イージングを linear、開始

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

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

opacity: 0.0;から opacity: 1.0;に変更して、見えるようにします。

〔惑星の画像を表示する〕

地球の画像（images/Earth1.png）を入れる#earth ボックスを記述します。position は

absolute にして、位置は top -10px と left -50px（#anime-box ボックスの左上端を基準と

した位置）で指定します。width: 200px; height: 200px;と指定します。

月の画像（images/Moon.png）を入れる#earth ボックスを記述します。position は absolute

にして、位置は top 5px と left 500px（#anime-box ボックスの左上端を基準とした位置）

で指定します。width: 55px; height: 55px;と指定します。

土星の画像（images/Saturn2 53X100.png）を入れる#earth ボックスを記述します。position

は absolute にして、位置は top 15px と left 720px（#anime-box ボックスの左上端を基準

とした位置）で指定します。width: 30px; height: 16px;と指定します。

〔飛び交う宇宙船のアニメーションを表示する〕

スペースシャトルの画像（images/SpaceShuttle.png）を入れる#shuttle ボックスを記述し

ます。position は absolute にして、位置は top 5px と left -40px（#anime-box ボックス

の左上端を基準とした位置）で指定します。width: 32px; height: 18px;と指定します。

ボックスはアニメーション名を shuttleAnime、実行時間を 20s、イージングを linear、開

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

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

#anime-box の top: 5px;の位置から transform プロパティの treanslateX( )関数でＸ方向

へ#anime-box の右側へ飛び出すまで 810px 移動し、

飛び出したら top: 5px;の位置から top:

30px;へ移し、rotateZ( )関数で時計回りに 180 度回転しスペースシャトルの画像を左右反

転させます。左右反転したまま#anime-box の左側へ飛び出すまで 810px 戻します。これに

よりスペースシャトルが宇宙空間を左右に飛び回るように見えます。

大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

〔HTML の記述（NaviMenuAnime01.html）

イズ号の画像の img 要素および ul 要素と li 要素でリストを記述します。 <a

#anime-box と同じサイズの #stars-0 ボックスを指定し、その background-image に