leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

(1)

1346-6 応用２ Falling Leaves

落ち葉が舞い散る様子をアニメーションにしてみましょう。できるだけリアルに再現して

みます。さらに秋のイメージアニメーションを作ってみましょう。

●落ち葉が舞い散るアニメーション

紅葉（もみじ）

、銀杏（いちょう）

、栗の葉がひらひら舞いながら落ちてきます。

【FallingLeavesAnime の説明】

〔HTML の記述（FallingLeavesAnime.html）

〕

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

id 属性 leaf1-H～leaf7-H の div 要素（水平方向に移動するボックス）を記述し、中に id

属性 leaf1-V～leaf7-V の div 要素（垂直方向に移動するボックス）を記述し、その中に id

属性 leaf1～leaf7 の div 要素（葉のボックス）を記述し、葉の img 画像を指定します。

〔水平移動ボックス〕

〔垂直移動ボックス〕〔葉のボックス〕〔img 画像〕

leaf1-H leaf1-V leaf1 images/Leaf1.png

サンプルＣＳＳ１

(2)

leaf2-H leaf2-V leaf2 images/Leaf2.png

leaf3-H leaf3-V leaf3 images/Leaf3.png

leaf4-H leaf4-V leaf4 images/Leaf4.png

leaf5-H leaf5-V leaf5 images/Leaf5.png

leaf6-H leaf6-V leaf6 images/Leaf6.png

leaf7-H leaf7-V leaf7 images/Leaf7.png

<!DOCTYPE html> <html>

<head>

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

</div>

</div>

(3)

〔CSS の記述（FallingLeavesAnime.css）

〕

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

背景色を background-color: #000000;（黒色）で指定します。葉の画像が#stage ボックス

の外から落下し始めるので、見えないように overflow: hidden;を指定します。

画像が各 div 要素のサイズに合うように、つぎのように指定します。

〔落ち葉を舞わせる仕組み〕

#stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; } #stage img { width: 100%; height: 100%; } </div> </div> </div> </body> </html>

水平方向に移動する大きさ

ゼロのボックス（赤色の点）

垂直方向に移動する大きさ

ゼロのボックス（青色の点）

回転する葉のボックス（緑色のボックス）

#stage

(4)

#stage ボックス（背景色が黒色のボックス）の外につぎのような要素（ボックス）を指定

します。

水平方向に移動する大きさゼロのボックス（赤色の点）のスタイルを指定します。このボ

ックスが垂直方向に移動する大きさゼロのボックス（青色の点）と葉のボックス（緑色の

ボックス）の移動の起点になります。

垂直方向に移動する大きさゼロのボックス（青色の点）のスタイルを指定します。このボ

ックスが葉のボックス（緑色のボックス）の移動の起点になります。

葉のボックス（緑色のボックス）のスタイルを指定します。このボックスは葉が回転する

ボックスになります。

これらのボックスの top プロパティ、left プロパティ、transform プロパティの rotateX

関数、rotateY 関数、rotateZ 関数をさまざまに変化させて、落ち葉が舞い散るアニメーシ

ョンにします。

それぞれの落ち葉のアニメーションの指定をします。

#leaf1-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-64px; left: 200px;（#stage ボックスの左上端を起点と

した位置）で指定します。width と height は指定しない

ので大きさゼロのボックスになります。

アニメーション名を leaf1Anime1、実行時間を 8s、イー

ジングを linear 、開始待ち時間を 0s 、繰り返しを

infinite、実行方向は normal で指定します。

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

から 100%の間に次のように横移動させます。

@keyframes leaf1Anime1 {

0% { left: 200px; animation-timing-function: ease-in-out; } 10% { left: 50px; animation-timing-function: ease-in-out; }

/* Leaf1 *****************************************************************/ #leaf1-H {

top: -64px; left: 200px; position: absolute;

animation: leaf1Anime1 8s linear 0s infinite normal;

-webkit-animation: leaf1Anime1 8s linear 0s infinite normal; }

(5)

#leaf1-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf1-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

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

から 100%の間に次のように縦移動させます。

0% { top: 0px; animation-timing-function: ease-in-out; } 50% { top: 100px; animation-timing-function: ease-in; } 100% { top: 564px; }

}

@-webkit-keyframes leaf1Anime2 {

0% { top: 0px; -webkit-animation-timing-function: ease-in-out; } 50% { top: 100px; -webkit-animation-timing-function: ease-in; } 100% { top: 564px; } } #leaf1-V { top: 0px; left: 0px; position: absolute;

animation: leaf1Anime2 8s ease-in-out 0s infinite normal;

-webkit-animation: leaf1Anime2 8s ease-in-out 0s infinite normal; }

40% { left: 200px; animation-timing-function: ease-in-out; } 50% { left: 100px; animation-timing-function: ease-in-out; } 80% { left: 300px; animation-timing-function: ease-in-out; } 90% { left: 200px; animation-timing-function: ease-in-out; } 100% { left: 400px; }

}

0% { left: 200px; -webkit-animation-timing-function: ease-in-out; } 10% { left: 50px; -webkit-animation-timing-function: ease-in-out; } 40% { left: 200px; -webkit-animation-timing-function: ease-in-out; } 50% { left: 100px; -webkit-animation-timing-function: ease-in-out; } 80% { left: 300px; -webkit-animation-timing-function: ease-in-out; } 90% { left: 200px; -webkit-animation-timing-function: ease-in-out; } 100% { left: 400px; }

(6)

#leaf1 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 100px、height は 64px で指定します。

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

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

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

で transform: rotateX(-80deg);と指定し、X 軸の正方向から見て反時計回りに 80 度回転

させます。0%から 100%の間に transform: rotateZ(60deg) rotateX(80deg);と変化させて、

時計回りに 60 度回転させ X 軸の正方向から見て時計回りに 80 度まで回転させます。

#leaf2-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-92px; left: 200px;（#stage ボックスの左上端を起点と

した位置）で指定します。width と height は指定しない

ので大きさゼロのボックスになります。

アニメーション名を leaf2Anime1、実行時間を 12s、イー

ジングを linear 、開始待ち時間を 2s 、繰り返しを

infinite、実行方向は normal で指定します。

0% { transform: rotateX(-80deg); animation-timing-function: ease-in-out;} 100% { transform: rotateZ(60deg) rotateX(80deg); }

}

0% { -webkit-transform: rotateX(-80deg);

-webkit-animation-timing-function: ease-in-out;} 100% { -webkit-transform: rotateZ(60deg) rotateX(80deg); } } #leaf1 { top: 0px; left: 0px; width: 100px; height: 64px; position: absolute;

animation: leaf1Anime3 0.8s linear 0s infinite alternate;

-webkit-animation: leaf1Anime3 0.8s linear 0s infinite alternate; }

(7)

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

から 100%の間に次のように横移動させます。

#leaf2-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf2-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

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

から 100%の間に次のように縦移動させます。

0% { left: 200px; animation-timing-function: ease-in-out; } 25% { left: 50px; animation-timing-function: ease-in-out; } 50% { left: 300px; animation-timing-function: ease-in-out; } 75% { left: 100px; animation-timing-function: ease-in-out; } 100% { left: 600px; }

}

0% { left: 200px; -webkit-animation-timing-function: ease-in-out; } 25% { left: 50px; -webkit-animation-timing-function: ease-in-out; } 50% { left: 300px; -webkit-animation-timing-function: ease-in-out; } 75% { left: 100px; -webkit-animation-timing-function: ease-in-out; } 100% { left: 600px; } } /* Leaf2 *****************************************************************/ #leaf2-H { top: -92px; left: 200px; position: absolute;

#leaf2-V {

top: 0px; left: 0px; position: absolute;

(8)

#leaf2 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 100px、height は 92px で指定します。

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

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

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

から 100%の間に transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);と指定

し、X 軸の正方向から見て時計回りに 360 度回転（１回転）

、Y 軸の正方向から見て時計回

りに 720 度回転（２回転）

、時計回りに 1080 度回転（３回転）させます。

0% { top: 0px; animation-timing-function: ease-in; } 20% { top: 150px; animation-timing-function: ease-in; } 35% { top: 200px; animation-timing-function: ease-in; } 50% { top: 150px; animation-timing-function: ease-in-out; } 100% { top: 550px; }

}

0% { top: 0px; -webkit-animation-timing-function: ease-in; } 20% { top: 150px; -webkit-animation-timing-function: ease-in; } 35% { top: 200px; -webkit-animation-timing-function: ease-in; } 50% { top: 150px; -webkit-animation-timing-function: ease-in-out; } 100% { top: 550px; }

}

@keyframes leaf2Anime3 { 0% { }

100% { transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); } }

@-webkit-keyframes leaf2Anime3 { 0% { }

100% { -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg); } } #leaf2 { top: 0px; left: 0px; width: 100px; height: 92px; position: absolute;

(9)

#leaf3-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-100px; left: 480px;（#stage ボックスの左上端を起点

とした位置）で指定します。width と height は指定しな

いので大きさゼロのボックスになります。

アニメーション名を leaf3Anime1、実行時間を 6s、イー

ジングを linear 、開始待ち時間を 1s 、繰り返しを

infinite、実行方向は normal で指定します。

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

から 100%の間に次のように横移動させます。

#leaf3-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf3-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

0% { left: 480px; animation-timing-function: ease-in-out; } 30% { left: 280px; animation-timing-function: ease-in-out; } 60% { left: 480px; animation-timing-function: ease-in-out; } 100% { left: 180px; }

}

0% { left: 480px; -webkit-animation-timing-function: ease-in-out; } 30% { left: 280px; -webkit-animation-timing-function: ease-in-out; } 60% { left: 480px; -webkit-animation-timing-function: ease-in-out; } 100% { left: 180px; } } /* Leaf3 *****************************************************************/ #leaf3-H { top: -100px; left: 480px; position: absolute;

(10)

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

から 100%の間に次のように縦移動させます。

#leaf3 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 64px、height は 100px で指定します。葉柄を軸に回転させたいので、変化の起点を

transform-origin: 70% 50%;で指定します。

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

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

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

から 100%の間に transform: rotateY(360deg);と指定し、Y 軸の正方向から見て時計回りに

360 度回転させます。

0% { top: 0px; animation-timing-function: ease-in; } 100% { top: 600px; }

}

0% { top: 0px; -webkit-animation-timing-function: ease-in; } 100% { top: 600px; } } #leaf3-V { top: 0px; left: 0px; position: absolute;

-webkit-animation: leaf3Anime2 6s ease-in-out 1s infinite normal; } #leaf3 { top: 0px; left: 0px; width: 64px; height: 100px; position: absolute; transform-origin: 70% 50%; -webkit-transform-origin: 70% 50%;

animation: leaf3Anime3 1s linear 1s infinite alternate;

-webkit-animation: leaf3Anime3 1s linear 1s infinite alternate; }

(11)

#leaf4-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-115px; left: 300px;（#stage ボックスの左上端を起点

とした位置）で指定します。width と height は指定しな

いので大きさゼロのボックスになります。

アニメーション名を leaf4Anime1、実行時間を 8s、イー

ジングを linear 、開始待ち時間を 2s 、繰り返しを

infinite、実行方向は normal で指定します。

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

から 100%の間に次のように横移動させます。

@keyframes leaf3Anime3 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes leaf3Anime3 { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); } } @keyframes leaf4Anime1 {

0% { left: 300px; animation-timing-function: ease-in-out; } 50% { left: 50px; }

100% { left: 50px; } }

0% { left: 300px; -webkit-animation-timing-function: ease-in-out; } 50% { left: 50px; } 100% { left: 50px; } } /* Leaf4 *****************************************************************/ #leaf4-H { top: -115px; left: 300px; position: absolute;

(12)

#leaf4-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf4-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

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

から 100%の間に次のように縦移動させます。

#leaf4 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 84px、height は 114px で指定します。葉柄を軸に回転させたいので、変化の起点を

transform-origin: 30% 50%;で指定します。

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

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

100% { top: 650px; } }

0% { top: 0px; -webkit-animation-timing-function: ease-in; } 50% { top: 650px; } 100% { top: 650px; } } #leaf4-V { top: 0px; left: 0px; position: absolute;

(13)

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

から 100%の間に transform: rotateY(-720deg);と指定し、Y 軸の正方向から見て反時計回

りに 720 度回転させます。

#leaf5-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-110px; left: 100px;（#stage ボックスの左上端を起点

とした位置）で指定します。width と height は指定しな

いので大きさゼロのボックスになります。

アニメーション名を leaf5Anime1、実行時間を 6s、イー

ジングを linear 、開始待ち時間を 0s 、繰り返しを

infinite、実行方向は normal で指定します。

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

@keyframes leaf4Anime3 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-720deg); } } @-webkit-keyframes leaf4Anime3 { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(-720deg); } }

-webkit-animation: leaf4Anime3 1s linear 2s infinite normal; } /* Leaf5 *****************************************************************/ #leaf5-H { top: -110px; left: 100px; position: absolute;

(14)

から 100%の間に次のように横移動させます。

#leaf5-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf5-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

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

から 100%の間に次のように縦移動させます。

#leaf5 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 100px、height は 110px で指定します。葉の真ん中を中心に回転させたいので、変化の

起点を transform-origin: 50% 50%;で指定します。

0% { left: 100px; animation-timing-function: ease-in-out; } 60% { left: 500px; animation-timing-function: ease-in-out; } 100% { left: 100px; }

}

0% { left: 100px; -webkit-animation-timing-function: ease-in-out; } 60% { left: 500px; -webkit-animation-timing-function: ease-in-out; } 100% { left: 100px; }

}

(15)

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

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

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

から 100%の間に transform: rotateZ(360deg) rotateX(180deg);と指定し、時計方向に 360

度回転させ、X 軸の正方向から見て時計回りに 180 度回転させます。

#leaf6-H 要素（水平方向に移動するボックス）

のスタイルを指定します。

position は absolute、

位置は top: -100px; left: -150px;（#stage ボ

ックスの左上端を起点とした位置）で指定しま

す。width と height は指定しないので大きさゼ

ロのボックスになります。

アニメーション名を leaf6Anime1、実行時間を

8s、イージングを linear、開始待ち時間を 2s、

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

0% { transform: rotateZ(0deg) rotateX(0deg); animation-timing-function: ease-in-out; } 100% { transform: rotateZ(360deg) rotateX(180deg); } }

0% { -webkit-transform: rotateZ(0deg) rotateX(0deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: rotateZ(360deg) rotateX(180deg); } } #leaf5 { top: 0px; left: 0px; width: 100px; height: 110px; position: absolute; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;

animation: leaf5Anime3 2s linear 0s infinite alternate;

-webkit-animation: leaf5Anime3 2s linear 0s infinite alternate; }

(16)

します。

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

から 100%の間に次のように横移動させます。

#leaf6-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf6-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

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

から 100%の間に次のように縦移動させます。

0% { left: -150px; animation-timing-function: ease-in-out; } 30% { left: 260px; animation-timing-function: ease-in-out; } 50% { left: 10px; animation-timing-function: ease-in-out; } 100% { left: 560px; }

}

0% { left: -150px; -webkit-animation-timing-function: ease-in-out; } 30% { left: 260px; -webkit-animation-timing-function: ease-in-out; } 50% { left: 10px; -webkit-animation-timing-function: ease-in-out; } 100% { left: 560px; } } /* Leaf6 *****************************************************************/ #leaf6-H { top: -100px; left: -150px; position: absolute;

#leaf6-V {

top: 0px; left: 0px; position: absolute;

(17)

#leaf6 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 100px、height は 110px で指定します。葉柄と葉の付け根を中心に回転させたいので、

変化の起点を transform-origin: 80% 50%;で指定します。

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

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

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

で transform: rotateY(0deg) rotateX(60deg);と指定し、X 軸の正方向から見て時計回り

に 60 度回転させます。0%から 100%の間に transform: rotateY(1080deg) rotateX(60deg);

と変化させ、X 軸の正方向から見て時計回りに 60 度回転させたままで Y 軸の正方向から見

て時計回りに 1080 度回転（３回転）させます。

}

0% { top: 0px; -webkit-animation-timing-function: ease-in; } 100% { top: 700px; }

}

0% { transform: rotateY(0deg) rotateX(60deg); } 100% { transform: rotateY(1080deg) rotateX(60deg); } }

0% { -webkit-transform: rotateY(0deg) rotateX(60deg); } 100% { -webkit-transform: rotateY(1080deg) rotateX(60deg); } } #leaf6 { top: 0px; left: 0px; width: 110px; height: 100px; position: absolute; transform-origin: 80% 50%; -webkit-transform-origin: 80% 50%;

(18)

#leaf7-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-115px; left: 150px;（#stage ボックスの左上端を起点

とした位置）で指定します。width と height は指定しな

いので大きさゼロのボックスになります。

アニメーション名を leaf7Anime1、実行時間を 17s、イー

ジングを linear 、開始待ち時間を 2s 、繰り返しを

infinite、実行方向は normal で指定します。

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

から 100%の間に次のように横移動させます。

#leaf7-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf7-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

@keyframes leaf7Anime1 { 0% { left: 150px; }

60% { left: 150px; animation-timing-function: ease-in-out; } 90% { left: 460px;; animation-timing-function: ease-in-out; } 100% { left: 300px; }

}

@-webkit-keyframes leaf7Anime1 { 0% { left: 150px; }

60% { left: 150px; -webkit-animation-timing-function: ease-in-out; } 90% { left: 460px;; -webkit-animation-timing-function: ease-in-out; } 100% { left: 300px; } } /* Leaf7 *****************************************************************/ #leaf7-H { top: -115px; left: 150px; position: absolute;

(19)

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

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

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

から 100%の間に次のように縦移動させます。

#leaf7 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 84px、height は 114px で指定します。葉柄の中間部を中心に回転させたいので、変化の

起点を transform-origin: 70% 60%;で指定します。

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

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

@keyframes leaf7Anime2 { 0% { top: 0px; }

}

@-webkit-keyframes leaf7Anime2 { 0% { top: 0px; }

(20)

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

で transform: rotateY(0deg) rotateX(60deg);と指定し、X 軸の正方向から見て時計回り

に 60 度回転させます。0%から 100%の間に transform: rotateY(1080deg) rotateX(60deg);

と変化させ、X 軸の正方向から見て時計回りに 60 度回転させたままで Y 軸の正方向から見

て時計回りに 1080 度回転（３回転）させます。

0% { transform: rotateY(0deg) rotateX(60deg); } 100% { transform: rotateY(1080deg) rotateX(60deg); } }

0% { -webkit-transform: rotateY(0deg) rotateX(60deg); } 100% { -webkit-transform: rotateY(1080deg) rotateX(60deg); } }

(21)

●落ち葉が舞い散る中にテキスト文字が表示されるアニメーション

落ち葉がひらひら舞い散る中に秋のイメージタイトルのテキスト文字が動きながら現れま

す。

【AutumnImageAnime の説明】

〔HTML の記述（AutumnImageAnime.html）

〕

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

id 属性 leaf1-H～leaf7-H の div 要素（水平方向に移動するボックス）を記述し、中に id

属性 leaf1-V～leaf7-V の div 要素（垂直方向に移動するボックス）を記述し、その中に id

属性 leaf1～leaf7 の div 要素（葉のボックス）を記述し、葉の img 画像を指定します。

〔水平移動ボックス〕

〔垂直移動ボックス〕〔葉のボックス〕〔img 画像〕

leaf1-H leaf1-V leaf1 images/Leaf1.png

leaf2-H leaf2-V leaf2 images/Leaf2.png

leaf3-H leaf3-V leaf3 images/Leaf3.png

leaf4-H leaf4-V leaf4 images/Leaf4.png

(22)

leaf5-H leaf5-V leaf5 images/Leaf5.png

leaf6-H leaf6-V leaf6 images/Leaf6.png

leaf7-H leaf7-V leaf7 images/Leaf7.png

id 属性 text-1 の div 要素を記述し、その中に「Autumn」を１文字ごと span 要素囲んで記

述します。

id 属性 text-2 の div 要素を記述し、その中に「枯れ葉」を１文字ごと span 要素囲んで記

述します。

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

</div>

(23)

〔CSS の記述（AutumnImageAnime.css）

〕

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

背景を background: url("images/DSC00005S.jpg");で紅葉の林の画像を指定します。ボー

ダーを border: 1px solid gray;（灰色）で、ボーダーの上部を border-top: 1px solid

lightgray;（明るい灰色）

、ボーダーの左部を border-left: 1px solid lightgray;（明る

い灰色）で指定します。葉の画像が#stage ボックスの外から落下し始めるので見えないよ

うに overflow: hidden;を指定します。

#stage ボックスに box-shadow: 8px 8px 8px rgba( 0, 0, 0, 0.5 );で影を付けます。

画像が各 div 要素のサイズに合うように、つぎのように指定します。

#stage { margin: 0px 0px 0px 20px; width: 600px; height: 500px; background: url("images/DSC00005S.jpg"); background-repeat: no-repeat;

border: 1px solid gray;

border-top: 1px solid lightgray; border-left: 1px solid lightgray; position: relative; overflow: hidden; box-shadow: 8px 8px 8px rgba( 0, 0, 0, 0.5 ); } #stage img { width: 100%; height: 100%; } <div id="leaf7-V">

(24)

※落ち葉が舞い散る部分は前述のサンプルＣＳＳ１の#leaf1-H ボックスのスタイルから

#leaf7 ボックスのスタイルの指定と同一です。

〔

「Autumn」を表示する〕

#stage ボックスの右側からぼやけた文字が現れて、左に移動しながら徐々にはっきりとし

た文字になります。

#text-1 要素のスタイルを指定します。position は absolute、位置は top: 100px; left: 0px;

（#stage ボックスの左上端を起点とした位置）で指定します。width は 600px、height は

150px で指定します。このボックスは span 要素とテキストの起点になります。

#text-1 span 要素のスタイル（span 要素の共通仕様）を指定します。position は absolute、

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

す。テキストのフォント等を指定します。text-align: center;、フォントは font: bold

italic 92px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、文字色は color:

#FFA500;（オレンジ色）で指定します。

#text-1 > span:nth-child(1)要素

（文字

「A」

）

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

位置は left: 30px;（#text-1 ボックスの左端を起点とした位置）で指定します。ここで位

置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を決めます。

/***************************************************************************** * Text move animation (Autumn) * *****************************************************************************/ #text-1 { top: 100px; left: 0px; width: 600px; height: 150px; position: absolute; } #text-1 span { top: 0px; left: 0px; text-align: center;

font: bold italic 92px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: #FFA500;

position: absolute; }

(25)

最初は見えないように opacity: 0.0;と指定します。

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

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

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

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

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

left: 630px;の位置（#text-1 ボックスの外、すなわち#stage ボックスの外）に置き、

opacity: 0.0;で見えないようにしておきます。0%から 10%の間に opacity: 1.0;に変化さ

せて見えるようにします。0%から 10%の間は待機期間です。10%から 40%の間に left: 30px;

まで移動させます。

40%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;

に変化させて徐々に見えないようにします。

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

ら 10%の間に color: transparent;に変化させて文字色を透明にし、text-shadow: 10px 0px

30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0);でオレンジ色の影の幅

を大きく取って文字がぼやけて見えるようにします。0%から 10%の間は待機期間です。10%

@keyframes char1anime { 0% { left: 630px; opacity: 0.0; }

10% { left: 630px; opacity: 1.0; animation-timing-function: ease-out; } 40% { left: 30px; opacity: 1.0; } 95% { left: 30px; opacity: 1.0; } 100% { left: 30px; opacity: 0.0; } } @-webkit-keyframes char1anime { 0% { left: 630px; opacity: 0.0; }

10% { left: 630px; opacity: 1.0; -webkit-animation-timing-function: ease-out; } 40% { left: 30px; opacity: 1.0; } 95% { left: 30px; opacity: 1.0; } 100% { left: 30px; opacity: 0.0; } } /* A **************************************************************/ #text-1 > span:nth-child(1) { left: 30px; opacity: 0.0;

animation: char1anime 6s linear 0s infinite normal, shadeOff1 6s linear 0s infinite normal;

-webkit-animation: char1anime 6s linear 0s infinite normal, shadeOff1 6s linear 0s infinite normal; }

(26)

から 60%の間に color: #FFA500;に変化させて文字色をオレンジ色にし、text-shadow: 0px

0px 0px rgba(255,165,0,0.0);でオレンジ色の影の幅を 0 にし、影の色も透明にして、文

字がはっきりと見えるようにします。60%から 100%まではそのままです。

#text-1 > span:nth-child(2)要素

（文字

「u」

）

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

位置は left: 100px;（#text-1 ボックスの左端を起点とした位置）で指定します。ここで

位置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を決めます。

最初は見えないように opacity: 0.0;と指定します。

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

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

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

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

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

left: 630px;の位置（#text-1 ボックスの外、すなわち#stage ボックスの外）に置き、

opacity: 0.0;で見えないようにしておきます。0%から 25%の間に opacity: 1.0;に変化さ

@keyframes shadeOff1 { 0% { }

10% { animation-timing-function: ease-in;

color: transparent; text-shadow: 10px 0px 30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0); }

60% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); } 100% { }

}

@-webkit-keyframes shadeOff1 { 0% { }

10% { -webkit-animation-timing-function: ease-in;

60% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); } 100% { } } /* u **************************************************************/ #text-1 > span:nth-child(2) { left: 100px; opacity: 0.0;

(27)

せて見えるようにします。0%から 25%の間は待機期間です。25%から 50%の間に left: 100px;

まで移動させます。

50%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;

に変化させて徐々に見えないようにします。

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

ら 25%の間に color: transparent;に変化させて文字色を透明にし、text-shadow: 10px 0px

30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0);でオレンジ色の影の幅

を大きく取って文字がぼやけて見えるようにします。0%から 25%の間は待機期間です。25%

から 60%の間に color: #FFA500;に変化させて文字色をオレンジ色にし、text-shadow: 0px

0px 0px rgba(255,165,0,0.0);でオレンジ色の影の幅を 0 にし、影の色も透明にして、文

字がはっきりと見えるようにします。60%から 100%まではそのままです。

25% { left: 630px; opacity: 1.0; -webkit-animation-timing-function: ease-out; } 50% { left: 100px; opacity: 1.0; } 95% { left: 100px; opacity: 1.0; } 100% { left: 100px; opacity: 0.0; } } @keyframes shadeOff2 { 0% { } 25% { animation-timing-function: ease-in;

}

(28)

#text-1 > span:nth-child(3)要素（文字「t」

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

位置は left: 165px;（#text-1 ボックスの左端を起点とした位置）で指定します。ここで

位置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を決めます。

最初は見えないように opacity: 0.0;と指定します。

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

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

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

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

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

left: 630px;の位置（#text-1 ボックスの外、すなわち#stage ボックスの外）に置き、

opacity: 0.0;で見えないようにしておきます。0%から 35%の間に opacity: 1.0;に変化さ

せて見えるようにします。0%から 35%の間は待機期間です。35%から 60%の間に left: 165px;

まで移動させます。

60%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;

に変化させて徐々に見えないようにします。

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

35% { left: 630px; opacity: 1.0; -webkit-animation-timing-function: ease-out; } 60% { left: 165px; opacity: 1.0; } 95% { left: 165px; opacity: 1.0; } 100% { left: 165px; opacity: 0.0; } } /* t **************************************************************/ #text-1 > span:nth-child(3) { left: 165px; opacity: 0.0;

(29)

ら 35%の間に color: transparent;に変化させて文字色を透明にし、text-shadow: 10px 0px

30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0);でオレンジ色の影の幅

を大きく取って文字がぼやけて見えるようにします。0%から 35%の間は待機期間です。35%

から 70%の間に color: #FFA500;に変化させて文字色をオレンジ色にし、text-shadow: 0px

0px 0px rgba(255,165,0,0.0);でオレンジ色の影の幅を 0 にし、影の色も透明にして、文

字がはっきりと見えるようにします。70%から 100%まではそのままです。

#text-1 > span:nth-child(4)要素

（文字

「u」

）

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

位置は left: 205px;（#text-1 ボックスの左端を起点とした位置）で指定します。ここで

位置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を決めます。

最初は見えないように opacity: 0.0;と指定します。

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

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

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

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

@keyframes shadeOff3 { 0% { } 35% { animation-timing-function: ease-in;

}

70% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); } 100% { } } /* u **************************************************************/ #text-1 > span:nth-child(4) { left: 205px; opacity: 0.0;

(30)

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

left: 630px;の位置（#text-1 ボックスの外、すなわち#stage ボックスの外）に置き、

opacity: 0.0;で見えないようにしておきます。0%から 50%の間に opacity: 1.0;に変化さ

せて見えるようにします。0%から 50%の間は待機期間です。50%から 65%の間に left: 205px;

まで移動させます。

65%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;

に変化させて徐々に見えないようにします。

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

ら 50%の間に color: transparent;に変化させて文字色を透明にし、text-shadow: 10px 0px

30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0);でオレンジ色の影の幅

を大きく取って文字がぼやけて見えるようにします。0%から 50%の間は待機期間です。50%

から 75%の間に color: #FFA500;に変化させて文字色をオレンジ色にし、text-shadow: 0px

0px 0px rgba(255,165,0,0.0);でオレンジ色の影の幅を 0 にし、影の色も透明にして、文

字がはっきりと見えるようにします。75%から 100%まではそのままです。

}

(31)

#text-1 > span:nth-child(5)要素（文字「m」

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

位置は left: 265px;（#text-1 ボックスの左端を起点とした位置）で指定します。ここで

位置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を決めます。

最初は見えないように opacity: 0.0;と指定します。

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

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

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

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

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

left: 630px;の位置（#text-1 ボックスの外、すなわち#stage ボックスの外）に置き、

opacity: 0.0;で見えないようにしておきます。0%から 60%の間に opacity: 1.0;に変化さ

せて見えるようにします。0%から 60%の間は待機期間です。60%から 70%の間に left: 265px;

まで移動させます。

70%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;

に変化させて徐々に見えないようにします。

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

60% { left: 630px; opacity: 1.0; -webkit-animation-timing-function: ease-out; } 70% { left: 265px; opacity: 1.0; } 95% { left: 265px; opacity: 1.0; } 100% { left: 265px; opacity: 0.0; } } /* m **************************************************************/ #text-1 > span:nth-child(5) { left: 265px; opacity: 0.0;

(32)

ら 60%の間に color: transparent;に変化させて文字色を透明にし、text-shadow: 10px 0px

30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0);でオレンジ色の影の幅

を大きく取って文字がぼやけて見えるようにします。0%から 60%の間は待機期間です。60%

から 80%の間に color: #FFA500;に変化させて文字色をオレンジ色にし、text-shadow: 0px

0px 0px rgba(255,165,0,0.0);でオレンジ色の影の幅を 0 にし、影の色も透明にして、文

字がはっきりと見えるようにします。80%から 100%まではそのままです。

#text-1 > span:nth-child(6)要素

（文字

「n」

）

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

位置は left: 355px;（#text-1 ボックスの左端を起点とした位置）で指定します。ここで

位置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を決めます。

最初は見えないように opacity: 0.0;と指定します。

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

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

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

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

@keyframes shadeOff5 { 0% { } 60% { animation-timing-function: ease-in;

}

80% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); } 100% { } } /* n **************************************************************/ #text-1 > span:nth-child(6) { left: 355px; opacity: 0.0;

(33)

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

left: 630px;の位置（#text-1 ボックスの外、すなわち#stage ボックスの外）に置き、

opacity: 0.0;で見えないようにしておきます。0%から 65%の間に opacity: 1.0;に変化さ

せて見えるようにします。0%から 65%の間は待機期間です。65%から 75%の間に left: 355px;

まで移動させます。

75%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;

に変化させて徐々に見えないようにします。

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

ら 65%の間に color: transparent;に変化させて文字色を透明にし、text-shadow: 10px 0px

30px rgba(255,165,0,1.0), -10px 0px 30px rgba(255,165,0,1.0);でオレンジ色の影の幅

を大きく取って文字がぼやけて見えるようにします。0%から 65%の間は待機期間です。65%

から 85%の間に color: #FFA500;に変化させて文字色をオレンジ色にし、text-shadow: 0px

0px 0px rgba(255,165,0,0.0);でオレンジ色の影の幅を 0 にし、影の色も透明にして、文

字がはっきりと見えるようにします。85%から 100%まではそのままです。

}

(34)

〔

「枯れ葉」を表示する〕

#stage ボックスの斜め左右からぼやけた文字が回転しながら現れて、左下方に移動しなが

ら徐々にはっきりとした文字になります。

#text-2 要素のスタイルを指定します。position は absolute、

位置は top: 250px; left: 0px;

（#stage ボックスの左上端を起点とした位置）で指定します。width は 600px、height は

150px で指定します。このボックスは span 要素とテキストの起点になります。

#text-2 span 要素のスタイル（span 要素の共通仕様）を指定します。position は absolute、

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

す。テキストのフォント等を指定します。text-align: center;、フォントは font: bold

120px"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;、文字色は color: gold;

（黄金色）で指定します。

/***************************************************************************** * Text move animation (枯れ葉) * *****************************************************************************/ #text-2 { top: 250px; left: 0px; width: 600px; height: 150px; position: absolute; }

(35)

text-shadow: 2px 2px 10px rgba(255,127,80,1.0), -2px 2px 10px rgba(255,127,80,1.0),

2px -2px 10px rgba(255,127,80,1.0), -2px -2px 10px rgba(255,127,80,1.0);でオレン

ジ色の影の幅を大きく取ります。

#text-2 > span:nth-child(1)要素（文字「枯」）のスタイルを指定します。position は

absolute、位置は left: 210px;（#text-2 ボックスの左端を起点とした位置）で指定しま

す。ここで位置を指定して、最初にそれぞれの span 要素（とその中のテキスト）の位置を

決めます。

最初は見えないように opacity: 0.0;と指定します。

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

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

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

までは left: -120px; top: -120px;の位置（#text-2 ボックスの外、すなわち#stage ボッ

クスの外）に置き、opacity: 0.0;で見えないようにしておきます。10%までは待機期間で

す。10%から 40%の間に transform: rotateZ(360deg);で時計回りに 360 度回転および left:

210px; top: 0px;まで移動させながら、opacity: 1.0;に変化させて見えるようにします。

40%から 95%まではそのままです。95%から 100%までの間に opacity: 0.0;に変化させて徐々

に見えないようにします。

#text-2 span { top: 0px; left: 0px; text-align: center;

font: bold 120px "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: gold;

position: absolute;

text-shadow: 2px 2px 10px rgba(255,127,80,1.0), -2px 2px 10px rgba(255,127,80,1.0), 2px -2px 10px rgba(255,127,80,1.0), -2px -2px 10px rgba(255,127,80,1.0); } /* 枯 **************************************************************/ #text-2 > span:nth-child(1) { left: 210px; opacity: 0.0;

animation: charB1anime 6s linear 0s infinite normal;

-webkit-animation: charB1anime 6s linear 0s infinite normal; }

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

1346-6 応用２ Falling Leaves

落ち葉が舞い散る様子をアニメーションにしてみましょう。できるだけリアルに再現して

みます。さらに秋のイメージアニメーションを作ってみましょう。

●落ち葉が舞い散るアニメーション

紅葉（もみじ）

、銀杏（いちょう）

、栗の葉がひらひら舞いながら落ちてきます。

【FallingLeavesAnime の説明】

〔HTML の記述（FallingLeavesAnime.html）

〕

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

id 属性 leaf1-H～leaf7-H の div 要素（水平方向に移動するボックス）を記述し、中に id

属性 leaf1-V～leaf7-V の div 要素（垂直方向に移動するボックス）を記述し、その中に id

属性 leaf1～leaf7 の div 要素（葉のボックス）を記述し、葉の img 画像を指定します。

〔水平移動ボックス〕

〔垂直移動ボックス〕 〔葉のボックス〕 〔img 画像〕

leaf1-H leaf1-V leaf1 images/Leaf1.png

サンプルＣＳＳ１

leaf2-H leaf2-V leaf2 images/Leaf2.png

leaf3-H leaf3-V leaf3 images/Leaf3.png

leaf4-H leaf4-V leaf4 images/Leaf4.png

leaf5-H leaf5-V leaf5 images/Leaf5.png

leaf6-H leaf6-V leaf6 images/Leaf6.png

leaf7-H leaf7-V leaf7 images/Leaf7.png

〔CSS の記述（FallingLeavesAnime.css）

〕

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

背景色を background-color: #000000;（黒色）で指定します。葉の画像が#stage ボックス

の外から落下し始めるので、見えないように overflow: hidden;を指定します。

画像が各 div 要素のサイズに合うように、つぎのように指定します。

〔落ち葉を舞わせる仕組み〕

水平方向に移動する大きさ

ゼロのボックス（赤色の点）

垂直方向に移動する大きさ

ゼロのボックス（青色の点）

回転する葉のボックス（緑色のボックス）

#stage

#stage

#stage ボックス（背景色が黒色のボックス）の外につぎのような要素（ボックス）を指定

します。

水平方向に移動する大きさゼロのボックス（赤色の点）のスタイルを指定します。このボ

ックスが垂直方向に移動する大きさゼロのボックス（青色の点）と葉のボックス（緑色の

ボックス）の移動の起点になります。

垂直方向に移動する大きさゼロのボックス（青色の点）のスタイルを指定します。このボ

ックスが葉のボックス（緑色のボックス）の移動の起点になります。

葉のボックス（緑色のボックス）のスタイルを指定します。このボックスは葉が回転する

ボックスになります。

これらのボックスの top プロパティ、left プロパティ、transform プロパティの rotateX

関数、rotateY 関数、rotateZ 関数をさまざまに変化させて、落ち葉が舞い散るアニメーシ

ョンにします。

それぞれの落ち葉のアニメーションの指定をします。

#leaf1-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

-64px; left: 200px;（#stage ボックスの左上端を起点と

した位置）で指定します。width と height は指定しない

ので大きさゼロのボックスになります。

アニメーション名を leaf1Anime1、実行時間を 8s、イー

ジ ン グ を linear 、 開 始 待 ち 時 間 を 0s 、 繰 り 返 し を

infinite、実行方向は normal で指定します。

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

から 100%の間に次のように横移動させます。

#leaf1-V 要素（垂直方向に移動するボックス）のスタイルを指定します。position は

absolute、位置は top: 0px; left: 0px;（#leaf1-H ボックスの左上端を起点とした位置）

で指定します。width と height は指定しないので大きさゼロのボックスになります。

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

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

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

から 100%の間に次のように縦移動させます。

#leaf1 要素（回転するボックス）のスタイルを指定します。position は absolute、位置は

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

は 100px、height は 64px で指定します。

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

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

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

で transform: rotateX(-80deg);と指定し、X 軸の正方向から見て反時計回りに 80 度回転

させます。0%から 100%の間に transform: rotateZ(60deg) rotateX(80deg);と変化させて、

時計回りに 60 度回転させ X 軸の正方向から見て時計回りに 80 度まで回転させます。

#leaf2-H 要素（水平方向に移動するボックス）のスタイ

ルを指定します。position は absolute、位置は top:

〔垂直移動ボックス〕〔葉のボックス〕〔img 画像〕

ジングを linear 、開始待ち時間を 0s 、繰り返しを

ジングを linear 、開始待ち時間を 2s 、繰り返しを

ジングを linear 、開始待ち時間を 1s 、繰り返しを

ジングを linear 、開始待ち時間を 2s 、繰り返しを