1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます 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 画像を指定します 水平移動ボックス 垂直移動ボックス 葉のボックス 1 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 <!DOCTYPE html> <html> <head> <title>fallingleavesanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="fallingleavesanime.css"> </head> <body> <p> Animation で落ち葉を舞わせる </p> <div id="stage"> <div id="leaf1-h"> <div id="leaf1-v"> <div id="leaf1"><img src="images/leaf1.png" alt="leaf1"> <div id="leaf2-h"> <div id="leaf2-v"> <div id="leaf2"><img src="images/leaf2.png" alt="leaf2"> <div id="leaf3-h"> <div id="leaf3-v"> <div id="leaf3"><img src="images/leaf3.png" alt="leaf3"> <div id="leaf4-h"> <div id="leaf4-v"> <div id="leaf4"><img src="images/leaf4.png" alt="leaf4"> <div id="leaf5-h"> <div id="leaf5-v"> <div id="leaf5"><img src="images/leaf5.png" alt="leaf5"> <div id="leaf6-h"> <div id="leaf6-v"> <div id="leaf6"><img src="images/leaf6.png" alt="leaf6"> <div id="leaf7-h"> <div id="leaf7-v"> <div id="leaf7"><img src="images/leaf7.png" alt="leaf7"> 2
</body> </html> CSS の記述 (FallingLeavesAnime.css) #stage ステージのスタイルを指定します width は 600px height は 500px で指定します 背景色を background-color: #000000;( 黒色 ) で指定します 葉の画像が #stage ボックスの外から落下し始めるので 見えないように overflow: hidden; を指定します #stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; 画像が各 div 要素のサイズに合うように つぎのように指定します #stage img { width: 100%; height: 100%; 落ち葉を舞わせる仕組み 水平方向に移動する大きさ ゼロのボックス ( 赤色の点 ) 垂直方向に移動する大きさ ゼロのボックス ( 青色の点 ) 回転する葉のボックス ( 緑色のボックス ) #stage #stage 3
#stage ボックス ( 背景色が黒色のボックス ) の外につぎのような要素 ( ボックス ) を指定します 水平方向に移動する大きさゼロのボックス ( 赤色の点 ) のスタイルを指定します このボックスが垂直方向に移動する大きさゼロのボックス ( 青色の点 ) と葉のボックス ( 緑色のボックス ) の移動の起点になります 垂直方向に移動する大きさゼロのボックス ( 青色の点 ) のスタイルを指定します このボックスが葉のボックス ( 緑色のボックス ) の移動の起点になります 葉のボックス ( 緑色のボックス ) のスタイルを指定します このボックスは葉が回転するボックスになります これらのボックスの top プロパティ left プロパティ transform プロパティの rotatex 関数 rotatey 関数 rotatez 関数をさまざまに変化させて 落ち葉が舞い散るアニメーションにします それぞれの落ち葉のアニメーションの指定をします #leaf1-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -64px; left: 200px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf1anime1 実行時間を 8s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* Leaf1 *****************************************************************/ #leaf1-h { top: -64px; left: 200px; animation: leaf1anime1 8s linear 0s infinite normal; -webkit-animation: 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; 4
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; @-webkit-keyframes leaf1anime1 { 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; #leaf1-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf1-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf1anime2 実行時間を 8s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #leaf1-v { top: 0px; left: 0px; animation: leaf1anime2 8s ease-in-out 0s infinite normal; -webkit-animation: leaf1anime2 8s ease-in-out 0s infinite normal; アニメーション名 leaf1anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます @keyframes leaf1anime2 { 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; 5
#leaf1 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf1-V ボックスの左上端を起点とした位置 ) で指定します width は 100px height は 64px で指定します アニメーション名を leaf1anime3 実行時間を 0.8s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #leaf1 { top: 0px; left: 0px; width: 100px; height: 64px; animation: leaf1anime3 0.8s linear 0s infinite alternate; -webkit-animation: 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 度まで回転させます @keyframes leaf1anime3 { 0% { transform: rotatex(-80deg); animation-timing-function: ease-in-out; 100% { transform: rotatez(60deg) rotatex(80deg); @-webkit-keyframes leaf1anime3 { 0% { -webkit-transform: rotatex(-80deg); -webkit-animation-timing-function: ease-in-out; 100% { -webkit-transform: rotatez(60deg) rotatex(80deg); #leaf2-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -92px; left: 200px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf2anime1 実行時間を 12s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します 6
/* Leaf2 *****************************************************************/ #leaf2-h { top: -92px; left: 200px; animation: leaf2anime1 12s linear 2s infinite normal; -webkit-animation: leaf2anime1 12s linear 2s infinite normal; アニメーション名 leaf2anime1 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように横移動させます @keyframes leaf2anime1 { 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; @-webkit-keyframes leaf2anime1 { 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-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf2-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf2anime2 実行時間を 12s イージングを ease-in-out 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf2-v { top: 0px; left: 0px; animation: leaf2anime2 12s linear 2s infinite normal; -webkit-animation: leaf2anime2 12s linear 2s infinite normal; アニメーション名 leaf2anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます 7
@keyframes leaf2anime2 { 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; @-webkit-keyframes leaf2anime2 { 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; #leaf2 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf2-V ボックスの左上端を起点とした位置 ) で指定します width は 100px height は 92px で指定します アニメーション名を leaf2anime3 実行時間を 4s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf2 { top: 0px; left: 0px; width: 100px; height: 92px; animation: leaf2anime3 4s linear 2s infinite normal; -webkit-animation: leaf2anime3 4s linear 2s infinite normal; アニメーション名 leaf2anime3 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatex(360deg) rotatey(720deg) rotatez(1080deg); と指定し X 軸の正方向から見て時計回りに 360 度回転 (1 回転 ) Y 軸の正方向から見て時計回りに 720 度回転 (2 回転 ) 時計回りに 1080 度回転 (3 回転 ) させます @keyframes leaf2anime3 { 0% { 100% { transform: rotatex(360deg) rotatey(720deg) rotatez(1080deg); @-webkit-keyframes leaf2anime3 { 0% { 100% { -webkit-transform: rotatex(360deg) rotatey(720deg) rotatez(1080deg); 8
#leaf3-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -100px; left: 480px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf3anime1 実行時間を 6s イージングを linear 開始待ち時間を 1s 繰り返しを infinite 実行方向は normal で指定します /* Leaf3 *****************************************************************/ #leaf3-h { top: -100px; left: 480px; animation: leaf3anime1 6s linear 1s infinite normal; -webkit-animation: leaf3anime1 6s linear 1s infinite normal; アニメーション名 leaf3anime1 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように横移動させます @keyframes leaf3anime1 { 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; @-webkit-keyframes leaf3anime1 { 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-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf3-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf3anime2 実行時間を 6s イージングを ease-in-out 開始待ち時 間を 1s 繰り返しを infinite 実行方向は normal で指定します 9
#leaf3-v { top: 0px; left: 0px; animation: leaf3anime2 6s ease-in-out 1s infinite normal; -webkit-animation: leaf3anime2 6s ease-in-out 1s infinite normal; アニメーション名 leaf3anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます @keyframes leaf3anime2 { 0% { top: 0px; animation-timing-function: ease-in; 100% { top: 600px; @-webkit-keyframes leaf3anime2 { 0% { top: 0px; -webkit-animation-timing-function: ease-in; 100% { top: 600px; #leaf3 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf3-V ボックスの左上端を起点とした位置 ) で指定します width は 64px height は 100px で指定します 葉柄を軸に回転させたいので 変化の起点を transform-origin: 70% 50%; で指定します アニメーション名を leaf3anime3 実行時間を 1s イージングを linear 開始待ち時間を 1s 繰り返しを infinite 実行方向は alternate で指定します #leaf3 { top: 0px; left: 0px; width: 64px; height: 100px; transform-origin: 70% 50%; -webkit-transform-origin: 70% 50%; animation: leaf3anime3 1s linear 1s infinite alternate; -webkit-animation: leaf3anime3 1s linear 1s infinite alternate; アニメーション名 leaf3anime3 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatey(360deg); と指定し Y 軸の正方向から見て時計回りに 360 度回転させます 10
@keyframes leaf3anime3 { 0% { transform: rotatey(0deg); 100% { transform: rotatey(360deg); @-webkit-keyframes leaf3anime3 { 0% { -webkit-transform: rotatey(0deg); 100% { -webkit-transform: rotatey(360deg); #leaf4-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -115px; left: 300px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf4anime1 実行時間を 8s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します /* Leaf4 *****************************************************************/ #leaf4-h { top: -115px; left: 300px; animation: leaf4anime1 8s linear 2s infinite normal; -webkit-animation: leaf4anime1 8s linear 2s infinite normal; アニメーション名 leaf4anime1 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように横移動させます @keyframes leaf4anime1 { 0% { left: 300px; animation-timing-function: ease-in-out; 50% { left: 50px; 100% { left: 50px; @-webkit-keyframes leaf4anime1 { 0% { left: 300px; -webkit-animation-timing-function: ease-in-out; 50% { left: 50px; 100% { left: 50px; 11
#leaf4-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf4-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf4anime2 実行時間を 8s イージングを ease-in-out 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf4-v { top: 0px; left: 0px; animation: leaf4anime2 8s ease-in-out 2s infinite normal; -webkit-animation: leaf4anime2 8s ease-in-out 2s infinite normal; アニメーション名 leaf4anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます @keyframes leaf4anime2 { 0% { top: 0px; animation-timing-function: ease-in; 50% { top: 650px; 100% { top: 650px; @-webkit-keyframes leaf4anime2 { 0% { top: 0px; -webkit-animation-timing-function: ease-in; 50% { top: 650px; 100% { top: 650px; #leaf4 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf4-V ボックスの左上端を起点とした位置 ) で指定します width は 84px height は 114px で指定します 葉柄を軸に回転させたいので 変化の起点を transform-origin: 30% 50%; で指定します アニメーション名を leaf4anime3 実行時間を 1s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf4 { top: 0px; left: 0px; width: 84px; height: 114px; transform-origin: 30% 50%; -webkit-transform-origin: 30% 50%; 12
animation: leaf4anime3 1s linear 2s infinite normal; -webkit-animation: leaf4anime3 1s linear 2s infinite normal; アニメーション名 leaf4anime3 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatey(-720deg); と指定し Y 軸の正方向から見て反時計回 りに 720 度回転させます @keyframes leaf4anime3 { 0% { transform: rotatey(0deg); 100% { transform: rotatey(-720deg); @-webkit-keyframes leaf4anime3 { 0% { -webkit-transform: rotatey(0deg); 100% { -webkit-transform: rotatey(-720deg); #leaf5-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -110px; left: 100px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf5anime1 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* Leaf5 *****************************************************************/ #leaf5-h { top: -110px; left: 100px; animation: leaf5anime1 6s linear 0s infinite normal; -webkit-animation: leaf5anime1 6s linear 0s infinite normal; アニメーション名 leaf5anime1 に対応するタイムライン (@keyframes) を指定します 0% 13
から 100% の間に次のように横移動させます @keyframes leaf5anime1 { 0% { left: 100px; animation-timing-function: ease-in-out; 60% { left: 500px; animation-timing-function: ease-in-out; 100% { left: 100px; @-webkit-keyframes leaf5anime1 { 0% { left: 100px; -webkit-animation-timing-function: ease-in-out; 60% { left: 500px; -webkit-animation-timing-function: ease-in-out; 100% { left: 100px; #leaf5-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf5-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf5anime2 実行時間を 6s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #leaf5-v { top: 0px; left: 0px; animation: leaf5anime2 6s ease-in-out 0s infinite normal; -webkit-animation: leaf5anime2 6s ease-in-out 0s infinite normal; アニメーション名 leaf5anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます @keyframes leaf5anime2 { 0% { top: 0px; animation-timing-function: ease-in; 100% { top: 600px; @-webkit-keyframes leaf5anime2 { 0% { top: 0px; -webkit-animation-timing-function: ease-in; 100% { top: 600px; #leaf5 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf5-V ボックスの左上端を起点とした位置 ) で指定します width は 100px height は 110px で指定します 葉の真ん中を中心に回転させたいので 変化の 起点を transform-origin: 50% 50%; で指定します 14
アニメーション名を leaf5anime3 実行時間を 2s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #leaf5 { top: 0px; left: 0px; width: 100px; height: 110px; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; animation: leaf5anime3 2s linear 0s infinite alternate; -webkit-animation: leaf5anime3 2s linear 0s infinite alternate; アニメーション名 leaf5anime3 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatez(360deg) rotatex(180deg); と指定し 時計方向に 360 度回転させ X 軸の正方向から見て時計回りに 180 度回転させます @keyframes leaf5anime3 { 0% { transform: rotatez(0deg) rotatex(0deg); animation-timing-function: ease-in-out; 100% { transform: rotatez(360deg) rotatex(180deg); @-webkit-keyframes leaf5anime3 { 0% { -webkit-transform: rotatez(0deg) rotatex(0deg); -webkit-animation-timing-function: ease-in-out; 100% { -webkit-transform: rotatez(360deg) rotatex(180deg); #leaf6-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -100px; left: -150px;(#stage ボ ックスの左上端を起点とした位置 ) で指定しま す width と height は指定しないので大きさゼ ロのボックスになります アニメーション名を leaf6anime1 実行時間を 8s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定 15
します /* Leaf6 *****************************************************************/ #leaf6-h { top: -100px; left: -150px; animation: leaf6anime1 8s linear 2s infinite normal; -webkit-animation: leaf6anime1 8s linear 2s infinite normal; アニメーション名 leaf6anime1 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように横移動させます @keyframes leaf6anime1 { 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; @-webkit-keyframes leaf6anime1 { 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-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf6-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf6anime2 実行時間を 8s イージングを ease-in-out 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf6-v { top: 0px; left: 0px; animation: leaf6anime2 8s ease-in-out 2s infinite normal; -webkit-animation: leaf6anime2 8s ease-in-out 2s infinite normal; アニメーション名 leaf6anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます 16
@keyframes leaf6anime2 { 0% { top: 0px; animation-timing-function: ease-in; 100% { top: 700px; @-webkit-keyframes leaf6anime2 { 0% { top: 0px; -webkit-animation-timing-function: ease-in; 100% { top: 700px; #leaf6 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf6-V ボックスの左上端を起点とした位置 ) で指定します width は 100px height は 110px で指定します 葉柄と葉の付け根を中心に回転させたいので 変化の起点を transform-origin: 80% 50%; で指定します アニメーション名を leaf6anime3 実行時間を 4s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf6 { top: 0px; left: 0px; width: 110px; height: 100px; transform-origin: 80% 50%; -webkit-transform-origin: 80% 50%; animation: leaf6anime3 4s linear 2s infinite normal; -webkit-animation: 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 度回転 (3 回転 ) させます @keyframes leaf6anime3 { 0% { transform: rotatey(0deg) rotatex(60deg); 100% { transform: rotatey(1080deg) rotatex(60deg); @-webkit-keyframes leaf6anime3 { 0% { -webkit-transform: rotatey(0deg) rotatex(60deg); 100% { -webkit-transform: rotatey(1080deg) rotatex(60deg); 17
#leaf7-h 要素 ( 水平方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: -115px; left: 150px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります アニメーション名を leaf7anime1 実行時間を 17s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します /* Leaf7 *****************************************************************/ #leaf7-h { top: -115px; left: 150px; animation: leaf7anime1 17s linear 2s infinite normal; -webkit-animation: leaf7anime1 17s linear 2s infinite normal; アニメーション名 leaf7anime1 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように横移動させます @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-v 要素 ( 垂直方向に移動するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf7-H ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります 18
アニメーション名を leaf7anime2 実行時間を 17s イージングを ease-in-out 開始待ち 時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf7-v { top: 0px; left: 0px; animation: leaf7anime2 17s ease-in-out 2s infinite normal; -webkit-animation: leaf7anime2 17s ease-in-out 2s infinite normal; アニメーション名 leaf7anime2 に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に次のように縦移動させます @keyframes leaf7anime2 { 0% { top: 0px; 60% { top: 0px; animation-timing-function: ease-in; 100% { top: 650px; @-webkit-keyframes leaf7anime2 { 0% { top: 0px; 60% { top: 0px; -webkit-animation-timing-function: ease-in; 100% { top: 650px; #leaf7 要素 ( 回転するボックス ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#leaf7-V ボックスの左上端を起点とした位置 ) で指定します width は 84px height は 114px で指定します 葉柄の中間部を中心に回転させたいので 変化の起点を transform-origin: 70% 60%; で指定します アニメーション名を leaf7anime3 実行時間を 2s イージングを linear 開始待ち時間を 2s 繰り返しを infinite 実行方向は normal で指定します #leaf7 { top: 0px; left: 0px; width: 84px; height: 114px; transform-origin: 70% 60%; -webkit-transform-origin: 70% 60%; animation: leaf7anime3 2s linear 2s infinite normal; -webkit-animation: leaf7anime3 2s linear 2s infinite normal; 19
アニメーション名 leaf7anime3 に対応するタイムライン (@keyframes) を指定します 0% で transform: rotatey(0deg) rotatex(60deg); と指定し X 軸の正方向から見て時計回りに 60 度回転させます 0% から 100% の間に transform: rotatey(1080deg) rotatex(60deg); と変化させ X 軸の正方向から見て時計回りに 60 度回転させたままで Y 軸の正方向から見て時計回りに 1080 度回転 (3 回転 ) させます @keyframes leaf7anime3 { 0% { transform: rotatey(0deg) rotatex(60deg); 100% { transform: rotatey(1080deg) rotatex(60deg); @-webkit-keyframes leaf7anime3 { 0% { -webkit-transform: rotatey(0deg) rotatex(60deg); 100% { -webkit-transform: rotatey(1080deg) rotatex(60deg); 20
落ち葉が舞い散る中にテキスト文字が表示されるアニメーション サンプル CSS2 落ち葉がひらひら舞い散る中に秋のイメージタイトルのテキスト文字が動きながら現れま す 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 画像を指定します 水平移動ボックス 垂直移動ボックス 葉のボックス 21 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 id 属性 text-1 の div 要素を記述し その中に Autumn を1 文字ごと span 要素囲んで記 述します id 属性 text-2 の div 要素を記述し その中に 枯れ葉 を1 文字ごと span 要素囲んで記 述します <!DOCTYPE html> <html> <head> <title>autumnimageanime</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="autumnimageanime.css"> </head> <body> <p> Animation で落ち葉を舞わせ 文字を重ねて表示する </p> <div id="stage"> <div id="leaf1-h"> <div id="leaf1-v"> <div id="leaf1"><img src="images/leaf1.png" alt="leaf1"> <div id="leaf2-h"> <div id="leaf2-v"> <div id="leaf2"><img src="images/leaf2.png" alt="leaf2"> <div id="leaf3-h"> <div id="leaf3-v"> <div id="leaf3"><img src="images/leaf3.png" alt="leaf3"> <div id="leaf4-h"> <div id="leaf4-v"> <div id="leaf4"><img src="images/leaf4.png" alt="leaf4"> <div id="leaf5-h"> <div id="leaf5-v"> <div id="leaf5"><img src="images/leaf5.png" alt="leaf5"> <div id="leaf6-h"> <div id="leaf6-v"> <div id="leaf6"><img src="images/leaf6.png" alt="leaf6"> <div id="leaf7-h"> 22
<div id="leaf7-v"> <div id="leaf7"><img src="images/leaf7.png" alt="leaf7"> <div id="text-1"> <span>a</span><span>u</span><span>t</span><span>u</span><span>m</span> <span>n</span> <div id="text-2"> <span> 枯 </span><span> れ </span><span> 葉 </span> </body> </html> 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 ); で影を付けます #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 ); 画像が各 div 要素のサイズに合うように つぎのように指定します #stage img { width: 100%; height: 100%; 23
落ち葉が舞い散る部分は前述のサンプル CSS1 の #leaf1-h ボックスのスタイルから #leaf7 ボックスのスタイルの指定と同一です Autumn を表示する #stage ボックスの右側からぼやけた文字が現れて 左に移動しながら徐々にはっきりとし た文字になります #text-1 要素のスタイルを指定します position は absolute 位置は top: 100px; left: 0px; (#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 150px で指定します このボックスは span 要素とテキストの起点になります /***************************************************************************** * Text move animation (Autumn) * *****************************************************************************/ #text-1 { top: 100px; left: 0px; width: 600px; height: 150px; #text-1 span 要素のスタイル (span 要素の共通仕様 ) を指定します position は absolute 位置は top: 0px; left: 0px;(#text-1 ボックスの左上端を起点とした位置 ) で指定します テキストのフォント等を指定します text-align: center; フォントは font: bold italic 92px "MS Pゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 文字色は color: #FFA500;( オレンジ色 ) で指定します #text-1 span { top: 0px; left: 0px; text-align: center; font: bold italic 92px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: #FFA500; #text-1 > span:nth-child(1) 要素 ( 文字 A ) のスタイルを指定します position は absolute 位置は left: 30px;(#text-1 ボックスの左端を起点とした位置 ) で指定します ここで位 置を指定して 最初にそれぞれの span 要素 ( とその中のテキスト ) の位置を決めます 24
最初は見えないように opacity: 0.0; と指定します アニメーション名を char1anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します アニメーション名を shadeoff1 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 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; アニメーション名 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; に変化させて徐々に見えないようにします @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; アニメーション名 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% 25
から 60% の間に color: #FFA500; に変化させて文字色をオレンジ色にし text-shadow: 0px 0px 0px rgba(255,165,0,0.0); でオレンジ色の影の幅を 0 にし 影の色も透明にして 文 字がはっきりと見えるようにします 60% から 100% まではそのままです @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; 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% { #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 で指定します /* u **************************************************************/ #text-1 > span:nth-child(2) { left: 100px; opacity: 0.0; animation: char2anime 6s linear 0s infinite normal, shadeoff2 6s linear 0s infinite normal; -webkit-animation: 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; に変化さ 26
せて見えるようにします 0% から 25% の間は待機期間です 25% から 50% の間に left: 100px; まで移動させます 50% から 95% まではそのままです 95% から 100% までの間に opacity: 0.0; に変化させて徐々に見えないようにします @keyframes char2anime { 0% { left: 630px; opacity: 0.0; 25% { left: 630px; opacity: 1.0; animation-timing-function: ease-out; 50% { left: 100px; opacity: 1.0; 95% { left: 100px; opacity: 1.0; 100% { left: 100px; opacity: 0.0; @-webkit-keyframes char2anime { 0% { left: 630px; opacity: 0.0; 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; アニメーション名 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% まではそのままです @keyframes shadeoff2 { 0% { 25% { 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 shadeoff2 { 0% { 25% { -webkit-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% { 27
#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 で指定します /* t **************************************************************/ #text-1 > span:nth-child(3) { left: 165px; opacity: 0.0; animation: char3anime 6s linear 0s infinite normal, shadeoff3 6s linear 0s infinite normal; -webkit-animation: 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; に変化させて徐々に見えないようにします @keyframes char3anime { 0% { left: 630px; opacity: 0.0; 35% { left: 630px; opacity: 1.0; animation-timing-function: ease-out; 60% { left: 165px; opacity: 1.0; 95% { left: 165px; opacity: 1.0; 100% { left: 165px; opacity: 0.0; @-webkit-keyframes char3anime { 0% { left: 630px; opacity: 0.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; アニメーション名 shadeoff3 に対応するタイムライン (@keyframes) を指定します 0% か 28
ら 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% まではそのままです @keyframes shadeoff3 { 0% { 35% { 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); 70% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { @-webkit-keyframes shadeoff3 { 0% { 35% { -webkit-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); 70% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 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 で指定します /* u **************************************************************/ #text-1 > span:nth-child(4) { left: 205px; opacity: 0.0; animation: char4anime 6s linear 0s infinite normal, shadeoff4 6s linear 0s infinite normal; -webkit-animation: char4anime 6s linear 0s infinite normal, shadeoff4 6s linear 0s infinite normal; 29
アニメーション名 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; に変化させて徐々に見えないようにします @keyframes char4anime { 0% { left: 630px; opacity: 0.0; 50% { left: 630px; opacity: 1.0; animation-timing-function: ease-out; 65% { left: 205px; opacity: 1.0; 95% { left: 205px; opacity: 1.0; 100% { left: 205px; opacity: 0.0; @-webkit-keyframes char4anime { 0% { left: 630px; opacity: 0.0; 50% { left: 630px; opacity: 1.0; -webkit-animation-timing-function: ease-out; 65% { left: 205px; opacity: 1.0; 95% { left: 205px; opacity: 1.0; 100% { left: 205px; 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% まではそのままです @keyframes shadeoff4 { 0% { 50% { 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); 75% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { @-webkit-keyframes shadeoff4 { 0% { 50% { -webkit-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); 75% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { 30
#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 で指定します /* m **************************************************************/ #text-1 > span:nth-child(5) { left: 265px; opacity: 0.0; animation: char5anime 6s linear 0s infinite normal, shadeoff5 6s linear 0s infinite normal; -webkit-animation: 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; に変化させて徐々に見えないようにします @keyframes char5anime { 0% { left: 630px; opacity: 0.0; 60% { left: 630px; opacity: 1.0; animation-timing-function: ease-out; 70% { left: 265px; opacity: 1.0; 95% { left: 265px; opacity: 1.0; 100% { left: 265px; opacity: 0.0; @-webkit-keyframes char5anime { 0% { left: 630px; opacity: 0.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; アニメーション名 shadeoff5 に対応するタイムライン (@keyframes) を指定します 0% か 31
ら 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% まではそのままです @keyframes shadeoff5 { 0% { 60% { 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); 80% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { @-webkit-keyframes shadeoff5 { 0% { 60% { -webkit-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); 80% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 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 で指定します /* n **************************************************************/ #text-1 > span:nth-child(6) { left: 355px; opacity: 0.0; animation: char6anime 6s linear 0s infinite normal, shadeoff6 6s linear 0s infinite normal; -webkit-animation: char6anime 6s linear 0s infinite normal, shadeoff6 6s linear 0s infinite normal; 32
アニメーション名 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; に変化させて徐々に見えないようにします @keyframes char6anime { 0% { left: 630px; opacity: 0.0; 65% { left: 630px; opacity: 1.0; animation-timing-function: ease-out; 75% { left: 355px; opacity: 1.0; 95% { left: 355px; opacity: 1.0; 100% { left: 355px; opacity: 0.0; @-webkit-keyframes char6anime { 0% { left: 630px; opacity: 0.0; 65% { left: 630px; opacity: 1.0; -webkit-animation-timing-function: ease-out; 75% { left: 355px; opacity: 1.0; 95% { left: 355px; opacity: 1.0; 100% { left: 355px; 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% まではそのままです @keyframes shadeoff6 { 0% { 65% { 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); 85% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { @-webkit-keyframes shadeoff6 { 0% { 65% { -webkit-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); 85% { color: #FFA500; text-shadow: 0px 0px 0px rgba(255,165,0,0.0); 100% { 33
枯れ葉 を表示する #stage ボックスの斜め左右からぼやけた文字が回転しながら現れて 左下方に移動しなが ら徐々にはっきりとした文字になります #text-2 要素のスタイルを指定します position は absolute 位置は top: 250px; left: 0px; (#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 150px で指定します このボックスは span 要素とテキストの起点になります /***************************************************************************** * Text move animation ( 枯れ葉 ) * *****************************************************************************/ #text-2 { top: 250px; left: 0px; width: 600px; height: 150px; #text-2 span 要素のスタイル (span 要素の共通仕様 ) を指定します position は absolute 位置は top: 0px; left: 0px;(#text-2 ボックスの左上端を起点とした位置 ) で指定しま す テキストのフォント等を指定します text-align: center; フォントは font: bold 120px"MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; 文字色は color: gold; ( 黄金色 ) で指定します 34
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 { top: 0px; left: 0px; text-align: center; font: bold 120px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; color: gold; 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 で指定します /* 枯 **************************************************************/ #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; アニメーション名 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; に変化させて徐々に見えないようにします 35
@keyframes charb1anime { 0% { left: -120px; top: -120px; transform: rotatez(0deg); opacity: 0.0; 10% { left: -120px; top: -120px; transform: rotatez(0deg); opacity: 0.0; animation-timing-function: ease-out; 40% { left: 210px; top: 0px; transform: rotatez(360deg); opacity: 1.0; 95% { left: 210px; top: 0px; transform: rotatez(360deg); opacity: 1.0; 100% { left: 210px; top: 0px; transform: rotatez(360deg); opacity: 0.0; @-webkit-keyframes charb1anime { 0% { left: -120px; top: -120px; -webkit-transform: rotatez(0deg); opacity: 0.0; 10% { left: -120px; top: -120px; -webkit-transform: rotatez(0deg); opacity: 0.0; -webkit-animation-timing-function: ease-out; 40% { left: 210px; top: 0px; -webkit-transform: rotatez(360deg); opacity: 1.0; 95% { left: 210px; top: 0px; -webkit-transform: rotatez(360deg); opacity: 1.0; 100% { left: 210px; top: 0px; -webkit-transform: rotatez(360deg); opacity: 0.0; #text-2 > span:nth-child(2) 要素 ( 文字 れ ) のスタイルを指定します position は absolute 位置は left: 320px;(#text-2 ボックスの左端を起点とした位置 ) で指定します ここで位置を指定して 最初にそれぞれの span 要素 ( とその中のテキスト ) の位置を決めます 最初は見えないように opacity: 0.0; と指定します アニメーション名を charb2anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* れ **************************************************************/ #text-2 > span:nth-child(2) { left: 320px; opacity: 0.0; animation: charb2anime 6s linear 0s infinite normal; -webkit-animation: charb2anime 6s linear 0s infinite normal; アニメーション名 charb2anime に対応するタイムライン (@keyframes) を指定します 25% までは left: 610px; top: -350px; の位置 (#text-2 ボックスの外 すなわち #stage ボック スの外 ) に置き opacity: 0.0; で見えないようにしておきます 25% までは待機期間です 25% から 55% の間に transform: rotatez(-720deg); で反時計回りに 720 度回転および left: 320px; top: 0px; まで移動させながら opacity: 1.0; に変化させて見えるようにします 55% から 95% まではそのままです 95% から 100% までの間に opacity: 0.0; に変化させて徐々 に見えないようにします 36
@keyframes charb2anime { 0% { left: 610px; top: -350px; transform: rotatez(0deg); opacity: 0.0; 25% { left: 610px; top: -350px; transform: rotatez(0deg); opacity: 0.0; animation-timing-function: ease-out; 55% { left: 320px; top: 0px; transform: rotatez(-720deg); opacity: 1.0; 95% { left: 320px; top: 0px; transform: rotatez(-720deg); opacity: 1.0; 100% { left: 320px; top: 0px; transform: rotatez(-720deg); opacity: 0.0; @-webkit-keyframes charb2anime { 0% { left: 610px; top: -350px; -webkit-transform: rotatez(0deg); opacity: 0.0; 25% { left: 610px; top: -350px; -webkit-transform: rotatez(0deg); opacity: 0.0; -webkit-animation-timing-function: ease-out; 55% { left: 320px; top: 0px; -webkit-transform: rotatez(-720deg); opacity: 1.0; 95% { left: 320px; top: 0px; -webkit-transform: rotatez(-720deg); opacity: 1.0; 100% { left: 320px; top: 0px; -webkit-transform: rotatez(-720deg); opacity: 0.0; #text-2 > span:nth-child(3) 要素 ( 文字 葉 ) のスタイルを指定します position は absolute 位置は left: 440px;(#text-2 ボックスの左端を起点とした位置 ) で指定します ここで位置を指定して 最初にそれぞれの span 要素 ( とその中のテキスト ) の位置を決めます 最初は見えないように opacity: 0.0; と指定します アニメーション名を charb3anime 実行時間を 6s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* 葉 **************************************************************/ #text-2 > span:nth-child(3) { left: 440px; opacity: 0.0; animation: charb3anime 6s linear 0s infinite normal; -webkit-animation: charb3anime 6s linear 0s infinite normal; アニメーション名 charb3anime に対応するタイムライン (@keyframes) を指定します 40% までは left: 100px; top: -450px; の位置 (#text-2 ボックスの外 すなわち #stage ボック スの外 ) に置き opacity: 0.0; で見えないようにしておきます 40% までは待機期間です 40% から 70% の間に transform: rotatez(720deg); で時計回りに 720 度回転および left: 435px; top: 0px; まで移動させながら opacity: 1.0; に変化させて見えるようにします 70% から 95% まではそのままです 95% から 100% までの間に opacity: 0.0; に変化させて徐々 に見えないようにします 37
@keyframes charb3anime { 0% { left: 100px; top: -450px; transform: rotatez(0deg); opacity: 0.0; 40% { left: 100px; top: -450px; transform: rotatez(0deg); opacity: 0.0; animation-timing-function: ease-out; 70% { left: 435px; top: 0px; transform: rotatez(720deg); opacity: 1.0; 95% { left: 435px; top: 0px; transform: rotatez(720deg); opacity: 1.0; 100% { left: 435px; top: 0px; transform: rotatez(720deg); opacity: 0.0; @-webkit-keyframes charb3anime { 0% { left: 100px; top: -450px; -webkit-transform: rotatez(0deg); opacity: 0.0; 40% { left: 100px; top: -450px; -webkit-transform: rotatez(0deg); opacity: 0.0; -webkit-animation-timing-function: ease-out; 70% { left: 435px; top: 0px; -webkit-transform: rotatez(720deg); opacity: 1.0; 95% { left: 435px; top: 0px; -webkit-transform: rotatez(720deg); opacity: 1.0; 100% { left: 435px; top: 0px; -webkit-transform: rotatez(720deg); opacity: 0.0; 38