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

Size: px

Start display at page:

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

ゆみかうるしはた
5 years ago
Views:

1 応用 2 Class Selector たくさんの要素を一気に動かす魔法の CSS でアニメーションを作ってみましょう動かす要素がたくさんあって全て同じような動きをするアニメーションの場合にはクラスセレクタを使うと一気に動かすことができます id セレクタと class セレクタここで id セレクタと class セレクタの復習をしましょう id セレクタ #id 名 { プロパティ名 : 値 ; HTML 文書で id 属性 ( id=" " ) によって id 名が付けられた要素 ( タグと考えるとよいでしょう ) を対象にスタイルが適用されます 1つの HTML 文書内では同一 id 名称を重複して使用することはできませんですから複数の要素にアニメーションで同一のプロパティを指定する ( つまり同じ変化 1

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

HTML 文書内で同一 class 名称を重複して使用することができるので複数の要素に同一 class 名を指定してスタイルを適用することができます異なる要素に対して同一 class 名を指定することもできますですから

要素毎にプロパティを指定しなくても同一プロパティが適用されますセレクタの優先順位について 1つの要素に要素型セレクタ id セレクタ class セレクタの3つを指定しそれぞれのセレクタに同一のプロパティを異なった値で指定すると

2 をさせる ) ような場合にそれぞれの要素に id 属性で id 名を指定している場合には CSS の id セレクタごとにアニメーションでプロパティを指定する必要があります class セレクタ.class 名 { プロパティ名 : 値 ; HTML 文書で class 属性 ( class=" " ) によって class 名が付けられた要素 ( タグと考えるとよいでしょう ) を対象にスタイルが適用されます class 属性は id 属性と違って1つの HTML 文書内で同一 class 名称を重複して使用することができるので複数の要素に同一 class 名を指定してスタイルを適用することができます異なる要素に対して同一 class 名を指定することもできますですから複数の要素にアニメーションで同一のプロパティを指定する ( つまり同じ変化をさせる ) ような場合にそれぞれの要素に class 属性で同一 class 名を指定して CSS の class セレクタにアニメーションでプロパティを指定すれば要素毎にプロパティを指定しなくても同一プロパティが適用されますセレクタの優先順位について 1つの要素に要素型セレクタ id セレクタ class セレクタの3つを指定しそれぞれのセレクタに同一のプロパティを異なった値で指定すると次の優先順位でプロパティの値が適用されますセレクタの優先順位 ( 高 > 低 ) id セレクタ > class セレクタ > 要素型セレクタ詳しくは 1222-B Transform Using Class And Tag (class セレクタと要素型セレクタ (Tag) を使用してスタイルを適用する ) を参照してください UFO が突然出現して回転するアニメーションサンプル CSS1 UFO が一点から出現して回転を繰り返しまた消失します 2

3 RollingUFOs の説明 HTML の記述 (RollingUFOs.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 rotaterect の div 要素を記述しその中に class 属性 circle および id 属性 UFOs の div 要素を記述します class 属性 circle および id 属性 UFOs の div 要素の中に class 属性 circle の8 個の div 要素を記述します <!DOCTYPE html> <html> <head> <title>rollingufos</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="rollingufos.css"> </head> <body> <p> UFO が 1 点から広がって回転を繰り返す </p> <div id="stage"> <div id="rotaterect"> <div class="circle" id="ufos"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> </div> </body> </html> CSS の記述 (RollingUFOs.css) #stage ステージのスタイルを指定します width は 600px height は 500px で指定します 3

4 背景色を background-color: black;( 黒色 ) で指定します目には見えませんが UFO が回転する時に要素の一部が #stage ボックスからはみ出るようなので overflow: hidden; を指定します #stage { width: 600px; height: 500px; background-color: black; position: relative; overflow: hidden; #rotaterect 要素 ( 縦横回転するボックス ) のスタイルを指定します position は absolute 位置は top: 210px; left: 260px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 80px height は 80px で指定しますアニメーション名を rotaterectanime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rotaterect { top: 210px; left: 260px; width: 80px; height: 80px; animation: rotaterectanime 20s linear 0s infinite normal; -webkit-animation: rotaterectanime 20s linear 0s infinite normal; アニメーション名 rotaterectanime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間はそのままで 25% から 75% の間に transform: rotatex(360deg) rotatey(360deg); で X 軸の正方向から見て時計回りに 360 度 Y 軸の正方向から見て時計回りに 360 度回転させます 75% から 100% の間はそのままにします 0% から 25% の間は UFO が展開する時間 75% から 100% の間は UFO rotaterectanime { 0% { 25% { transform: rotatex( 0deg ) rotatey( 0deg ); animation-timing-function: ease-in-out; 75% { transform: rotatex( 360deg ) rotatey( 360deg ); 100% { transform: rotatex( 360deg ) rotatey( 360deg ); 4

5 @-webkit-keyframes rotaterectanime { 0% { 25% { -webkit-transform: rotatex( 0deg ) rotatey( 0deg ); -webkit-animation-timing-function: ease-in-out; 75% { -webkit-transform: rotatex( 360deg ) rotatey( 360deg ); 100% { -webkit-transform: rotatex( 360deg ) rotatey( 360deg );.circle 要素のスタイルを指定しますここでは class セレクタを使ってすべての FUO の共通スタイルを指定します position は absolute 位置は top: 0px; left: 0px; で指定します ( 注 :#UFOs の div 要素は #rotaterect ボックスの左上端を起点とした位置で #UFOs の子供の div 要素は #UFOs ボックスの左上端を起点とした位置になります )width は 80px height は 80px で指定します border-radius: 10px; で角丸四角形にしておきます /* UFOs ****************************************************/.circle { top: 0px; left: 0px; width: 80px; height: 80px; border-radius: 10px; #UFOs 要素 (8 個の UFO の中心に位置する親 UFO) のスタイルを指定します背景色を background-color: cyan;( シアン色 ) にします最初は見えないように opacity: 0.0; と指定しておきます opacity プロパティは子孫に継承されるので子供の UFO も最初は見えませんアニメーション名を UFOsAnime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs { background-color: cyan; opacity: 0.0; animation: UFOsAnime 20s linear 0s infinite normal; -webkit-animation: UFOsAnime 20s linear 0s infinite normal; アニメーション名 UFOsAnime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に opacity: 1.0; に変化させ見えるようにしますここで子供の UFO も見えるようになります border-radius: 80px; に変化させて円形にします 25% から 75% の間に円形 5

6 に見えるまま transform: rotatez(720deg); で時計回りに 720 度 (2 回転 ) 回転させます 75% から 100% の間に 720 度回転が終了した状態で opacity: 0.0; に変化させ見えないようにしますここで子供の UFO も見えなくなります border-radius: 10px; に変化させて角丸四角形にします 0% から 25% の間は UFO が展開する時間 75% から 100% の間は UFO UFOsAnime { 0% { opacity: 0.0; transform: rotatez(0deg); 25% { opacity: 1.0; border-radius: 80px; transform: rotatez(0deg); 75% { opacity: 1.0; border-radius: 80px; transform: rotatez(720deg); 100% { opacity: 0.0; transform: UFOsAnime { 0% { opacity: 0.0; -webkit-transform: rotatez(0deg); 25% { opacity: 1.0; border-radius: 80px; -webkit-transform: rotatez(0deg); 75% { opacity: 1.0; border-radius: 80px; -webkit-transform: rotatez(720deg); 100% { opacity: 0.0; -webkit-transform: rotatez(720deg); #UFOs > div:nth-child(1) 要素 (1 個目の子供 UFO) のスタイルを指定します背景色を background-color: yellow;( 黄色 ) にしますアニメーション名を UFO-01Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(1) { background-color: yellow; animation: UFO-01Anime 20s linear 0s infinite normal; -webkit-animation: UFO-01Anime 20s linear 0s infinite normal; アニメーション名 UFO-01Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(90deg) translatex(150px); で時計回りに 90 度回転させながら X 軸の正方向へ 150px 移動させますこれにより子供 UFO が中心の親 UFO から螺旋を描いて離れていくように見えます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X 軸上の位置を元に戻しますこれにより子供 UFO が螺旋を描きながら中心の親 UFO に収束していくように見えます 6

7 @keyframes UFO-01Anime { 0% { 25% { border-radius: 80px; transform: rotatez(90deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(90deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-01Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(90deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(90deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); #UFOs > div:nth-child(2) 要素 (2 個目の子供 UFO) のスタイルを指定します背景色を background-color: salmon;( サーモンピンク色 ) にしますアニメーション名を UFO-02Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(2) { background-color: salmon; animation: UFO-02Anime 20s linear 0s infinite normal; -webkit-animation: UFO-02Anime 20s linear 0s infinite normal; アニメーション名 UFO-02Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(135deg) translatex(150px); で時計回りに 135 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X UFO-02Anime { 0% { 25% { border-radius: 80px; transform: rotatez(135deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(135deg) translatex(150px); 7

8 100% { transform: rotatez(765deg) UFO-02Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(135deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(135deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); #UFOs > div:nth-child(3) 要素 (3 個目の子供 UFO) のスタイルを指定します背景色を background-color: yellowgreen;( 黄緑色 ) にしますアニメーション名を UFO-03Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(3) { background-color: yellowgreen; animation: UFO-03Anime 20s linear 0s infinite normal; -webkit-animation: UFO-03Anime 20s linear 0s infinite normal; アニメーション名 UFO-03Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(180deg) translatex(150px); で時計回りに 180 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X UFO-03Anime { 0% { 25% { border-radius: 80px; transform: rotatez(180deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(180deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-03Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(180deg) translatex(150px); 8

9 75% { border-radius: 80px; -webkit-transform: rotatez(180deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); #UFOs > div:nth-child(4) 要素 (4 個目の子供 UFO) のスタイルを指定します背景色を background-color: lightgray;( 明るい灰色 ) にしますアニメーション名を UFO-04Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(4) { background-color: lightgray; animation: UFO-04Anime 20s linear 0s infinite normal; -webkit-animation: UFO-04Anime 20s linear 0s infinite normal; アニメーション名 UFO-04Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(225deg) translatex(150px); で時計回りに 225 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X UFO-04Anime { 0% { 25% { border-radius: 80px; transform: rotatez(225deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(225deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-04Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(225deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(225deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); 9

10 #UFOs > div:nth-child(5) 要素 (5 個目の子供 UFO) のスタイルを指定します背景色を background-color: pink;( ピンク色 ) にしますアニメーション名を UFO-05Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(5) { background-color: pink; animation: UFO-05Anime 20s linear 0s infinite normal; -webkit-animation: UFO-05Anime 20s linear 0s infinite normal; アニメーション名 UFO-05Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(270deg) translatex(150px); で時計回りに 270 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X UFO-05Anime { 0% { 25% { border-radius: 80px; transform: rotatez(270deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(270deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-05Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(270deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(270deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); #UFOs > div:nth-child(6) 要素 (6 個目の子供 UFO) のスタイルを指定します背景色を background-color: orange;( オレンジ色 ) にしますアニメーション名を UFO-06Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します 10

11 #UFOs > div:nth-child(6) { background-color: orange; animation: UFO-06Anime 20s linear 0s infinite normal; -webkit-animation: UFO-06Anime 20s linear 0s infinite normal; アニメーション名 UFO-06Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(315deg) translatex(150px); で時計回りに 315 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X UFO-06Anime { 0% { 25% { border-radius: 80px; transform: rotatez(315deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(315deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-06Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(315deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(315deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); #UFOs > div:nth-child(7) 要素 (7 個目の子供 UFO) のスタイルを指定します背景色を background-color: violet;( 紫色 ) にしますアニメーション名を UFO-07Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(7) { background-color: violet; animation: UFO-07Anime 20s linear 0s infinite normal; -webkit-animation: UFO-07Anime 20s linear 0s infinite normal; 11

12 アニメーション名 UFO-07Anime に対応するタイムラインを指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(360deg) translatex(150px); で時計回りに 360 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X UFO-07Anime { 0% { 25% { border-radius: 80px; transform: rotatez(360deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(360deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-07Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(360deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(360deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); #UFOs > div:nth-child(8) 要素 (8 個目の子供 UFO) のスタイルを指定します背景色を background-color: skyblue;( 空色 ) にしますアニメーション名を UFO-08Anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #UFOs > div:nth-child(8) { background-color: skyblue; animation: UFO-08Anime 20s linear 0s infinite normal; -webkit-animation: UFO-08Anime 20s linear 0s infinite normal; アニメーション名 UFO-08Anime に対応するタイムライン (@keyframes) を指定します 0% から 25% の間に border-radius: 80px; に変化させて円形にしますまた transform: rotatez(405deg) translatex(150px); で時計回りに 405 度回転させながら X 軸の正方向へ 150px 移動させます 25% から 75% の間はそのままです 75% から 100% の間に transform: rotatez(765deg) translatex(0px); で時計回りに 765 度まで回転させながら X 軸上の位置 12

13 UFO-08Anime { 0% { 25% { border-radius: 80px; transform: rotatez(405deg) translatex(150px); 75% { border-radius: 80px; transform: rotatez(405deg) translatex(150px); 100% { transform: rotatez(765deg) UFO-08Anime { 0% { 25% { border-radius: 80px; -webkit-transform: rotatez(405deg) translatex(150px); 75% { border-radius: 80px; -webkit-transform: rotatez(405deg) translatex(150px); 100% { -webkit-transform: rotatez(765deg) translatex(0px); 13

14 宇宙空間をワープするアニメーションサンプル CSS2 宇宙空間をワープします星が前方から現れて超高速度で通過していきます WarpDots の説明 HTML の記述 (WarpDots.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 universe1 の div 要素を記述します id 属性 universe2 の div 要素を記述しその中に span 要素を4つ記述します id 属性 dotgroup1 の div 要素を記述しその中に id 属性 dot01 から dot12 の12 個の div 要素を記述します 12 個の div 要素に dots1 dots2 dots3 の順で class 属性を付けます id 属性 dotgroup2 の div 要素を記述しその中に id 属性 dot13 から dot24 の12 個の div 要素を記述します 12 個の div 要素に dots3 dots1 dots2 の順で class 属性を付けます <!DOCTYPE html> <html> <head> <title>warpdots</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="warpdots.css"> </head> <body> <p> class セレクタを活用してワープ状態を作る </p> <div id="stage"> <div id="universe"><span></span><span></span><span></span><span></span></div> <div id="dotgroup1"> <div id="dot01" class="dots1"></div> 14

15 <div id="dot02" class="dots2"></div> <div id="dot03" class="dots3"></div> <div id="dot04" class="dots1"></div> <div id="dot05" class="dots2"></div> <div id="dot06" class="dots3"></div> <div id="dot07" class="dots1"></div> <div id="dot08" class="dots2"></div> <div id="dot09" class="dots3"></div> <div id="dot10" class="dots1"></div> <div id="dot11" class="dots2"></div> <div id="dot12" class="dots3"></div> </div> <div id="dotgroup2"> <div id="dot13" class="dots3"></div> <div id="dot14" class="dots1"></div> <div id="dot15" class="dots2"></div> <div id="dot16" class="dots3"></div> <div id="dot17" class="dots1"></div> <div id="dot18" class="dots2"></div> <div id="dot19" class="dots3"></div> <div id="dot20" class="dots1"></div> <div id="dot21" class="dots2"></div> <div id="dot22" class="dots3"></div> <div id="dot23" class="dots1"></div> <div id="dot24" class="dots2"></div> </div> </div> </body> </html> CSS の記述 (WarpDots.css) #stage ステージのスタイルを指定します width は 600px height は 500px で指定します背景色を background-color: black;( 黒色 ) で指定します星がボックスからはみ出るので overflow: hidden; を指定します #stage { width: 600px; height: 500px; background-color: black; position: relative; overflow: hidden; #universe1 要素 ( 背景の宇宙のグラデーション 1) のスタイルを指定します position は absolute 位置は top: -150px; left: -100px;(#stage ボックスの左上端を起点とした位 15

16 置 ) で指定します width は 800px height は 800px で指定します背景を background: radial-gradient (#000000, #CC0000 ); で中央を黒色で徐々に外側へ赤色に変化する円形グラデーションにします opacity: 0.6; で少し薄めにします #universe1 { top: -150px; left: -100px; width: 800px; height: 800px; background: radial-gradient (#000000, #CC0000 ); background: -webkit-radial-gradient( #000000, #CC0000 ); opacity: 0.6; #universe2 要素 ( 背景の宇宙のグラデーション2) のスタイルを指定します position は absolute 位置は top: -150px; left: -100px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 800px height は 800px で指定しますアニメーション名を universe2anime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #universe2 { top: -150px; left: -100px; width: 800px; height: 800px; animation: universe2anime 20s ease-in-out 0s infinite alternate; -webkit-animation: universe2anime 20s ease-in-out 0s infinite alternate; アニメーション名 universe2anime に対応するタイムライン (@keyframes) を指定します 0% から 100% の間に transform: rotatez(360deg); で時計回りに 360 universe2anime { 0% { transform: rotatez(0deg); 100% { transform: universe2anime { 0% { -webkit-transform: rotatez(0deg); 100% { -webkit-transform: rotatez(360deg); #universe2 > span:nth-child(1) 要素 ( 緑色のグラデーション ) のスタイルを指定します 16

17 position は absolute 位置は top: -200px; left: -200px;(#universe2 ボックスの左上端を起点とした位置 ) で指定します width は 800px height は 800px で指定します border-radius: 20px; で角を丸くします背景を background: radial-gradient(closestside, rgba(0,102,102,0.6), rgba(0,102,102,0.0) ); で緑色が中央から外側へ徐々に薄く変化する円形グラデーションにします #universe2 > span:nth-child(1) { /* green */ top: -200px; left: -200px; width: 800px; height: 800px; border-radius: 20px; background: radial-gradient(closest-side, rgba(0,102,102,0.6), rgba(0,102,102,0.0) ); background: -webkit-radial-gradient(closest-side, rgba(0,102,102,0.6), rgba(0,102,102,0.0) ); #universe2 > span:nth-child(2) 要素 ( 黄色のグラデーション ) のスタイルを指定します position は absolute 位置は top: 300px; left: 300px;(#universe2 ボックスの左上端を起点とした位置 ) で指定します width は 500px height は 500px で指定します背景を background: radial-gradient(closest-side, rgba(102,102,0,0.3), rgba(102,102,0,0.0) ); で黄色が中央から外側へ徐々に薄く変化する円形グラデーションにします #universe2 > span:nth-child(2) { /* yellow */ top: 300px; left: 300px; width: 500px; height: 500px; background: radial-gradient(closest-side, rgba(102,102,0,0.3), rgba(102,102,0,0.0) ); background: -webkit-radial-gradient(closest-side, rgba(102,102,0,0.3), rgba(102,102,0,0.0) ); #universe2 > span:nth-child(3) 要素 ( 赤色のグラデーション ) のスタイルを指定します position は absolute 位置は top: -500px; left: 300px;(#universe2 ボックスの左上端を起点とした位置 ) で指定します width は 1000px height は 1000px で指定します border-radius: 200px 0px / 100px 0px; で角を丸くします背景を background: radialgradient(closest-side, rgba(255,0,0,0.6), rgba(255,0,0,0.0) ); で赤色が中央から外側へ徐々に薄く変化する円形グラデーションにします #universe2 > span:nth-child(3) { /* red */ top: -500px; left: 300px; width: 1000px; height: 1000px; border-radius: 200px 0px / 100px 0px; 17

18 background: radial-gradient(closest-side, rgba(255,0,0,0.6), rgba(255,0,0,0.0) ); background: -webkit-radial-gradient(closest-side, rgba(255,0,0,0.6), rgba(255,0,0,0.0) ); #universe2 > span:nth-child(4) 要素 ( 青色のグラデーション ) のスタイルを指定します position は absolute 位置は top: 300px; left: -500px;(#universe2 ボックスの左上端を起点とした位置 ) で指定します width は 1200px height は 1200px で指定します border-radius: 0px 200px / 0px 100px; で角を丸くします背景を background: radial-gradient(closest-side, rgba(0,0,255,0.5), rgba(0,0,255,0.0) ); で青色が中央から外側へ徐々に薄く変化する円形グラデーションにします #universe2 > span:nth-child(4) { /* blue */ top: 300px; left: -500px; width: 1200px; height: 1200px; border-radius: 0px 200px / 0px 100px; background: radial-gradient(closest-side, rgba(0,0,255,0.5), rgba(0,0,255,0.0) ); background: -webkit-radial-gradient(closest-side, rgba(0,0,255,0.5), rgba(0,0,255,0.0) ); 上記の 4 色のグラデーションで宇宙の背景のもやもやとした感じを出しています #dotgroup1 要素 ( 星グループ 1) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定します #dotgroup1 { top: 0px; left: 0px; width: 600px; height: 500px; 以下は #dotgroup1 要素の子供要素 ( それぞれの星 ) の位置およびサイズの初期値と色等を指定します #dot01 要素 ( 星 01) から #dot12 要素 ( 星 12) のスタイルを指定します position は absolute 位置は #dotgroup1 ボックスの左上端を起点とした位置で指定します 18

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

20 width: 15px; height: 15px; background-color: green; border-radius: 15px; #dot09 { top: 500px; left: 100px; width: 5px; height: 5px; background-color: yellow; border-radius: 5px; #dot10 { top: 450px; left: -20px; width: 10px; height: 10px; background-color: cyan; border-radius: 10px; #dot11 { top: 250px; left: -10px; width: 5px; height: 5px; background-color: magenta; border-radius: 5px; #dot12 { top: 80px; left: -130px; width: 15px; height: 15px; background-color: lightgreen; border-radius: 15px; #dotgroup2 要素 ( 星グループ 2) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定します #dotgroup2 要素の子供要素 ( それぞれの星 ) である #dot13 要素 ( 星 13) から #dot24 要素 ( 星 24) は #dotgroup1 要素の子供要素 ( それぞれの星 ) である #dot01 要素 ( 星 01) から #dot12 要素 ( 星 12) の位置およびサイズの初期値と色等を同じ値で指定していますそして #dotgroup2 要素を transform: rotatez(180deg); で時計回りに 180 度回転させています #dotgroup1 要素の星とは上下逆にして星が放射状に飛ぶようにしています ( 余りたくさんの星のスタイルを決めるのが面倒だから逆にしてしまったという理由もありますごめんなさいでもアニメーションをみていただけばこれがなかなか旨くいっているのが分かると思います ) 20

21 #dotgroup2 { top: 0px; left: 0px; width: 600px; height: 500px; transform: rotatez(180deg); -webkit-transform: rotatez(180deg); 以下は #dotgroup2 要素の子供要素 ( それぞれの星 ) の位置およびサイズの初期値と色等を指定します #dot13 要素 ( 星 13) から #dot24 要素 ( 星 24) のスタイルを指定します position は absolute 位置は #dotgroup2 ボックスの左上端を起点とした位置で指定します #dot13 { top: -10px; left: -10px; width: 5px; height: 5px; background-color: red; border-radius: 5px; #dot14 { top: -120px; left: 250px; width: 20px; height: 20px; background-color: blue; border-radius: 20px; #dot15 { top: -10px; left: 400px; width: 5px; height: 5px; background-color: gray; border-radius: 5px; #dot16 { top: 20px; left: 600px; width: 15px; height: 15px; background-color: pink; border-radius: 15px; #dot17 { top: 220px; left: 600px; width: 5px; height: 5px; background-color: orange; 21

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

23 星がそれぞれ異なる速度で飛び広がる仕組み #stage の中心から遠くに位置する星は速く動く #stage #stage の中心から遠くに位置する星は速く動く #stage の中心から近くに位置する星は遅く動く #stage の中央 top: 250px; left: 300px; #stage の中心から近くに位置する星は遅く動く #stage ボックスの中央 (top: 250px; left: 300px;) からそれぞれの星の最初の位置へ一定時間で戻す動きをさせているので #stage ボックスの中央から遠くに位置する星は速く動き近くに位置する星は遅く動きます星を動かす技法として class セレクタを利用することで多数の星を一気に動かしますここでは3つの class セレクタを使用して星を3パターンに分けて動かします class セレクタ.dots1 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 3s イージングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* クラスを使用して複数の星を一気に動かす ***************************/.dots1 { animation: dotsanime 3s ease-in 0s infinite normal; -webkit-animation: dotsanime 3s ease-in 0s infinite normal; 23

24 class セレクタ.dots2 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 3s イージングを ease-in 開始待ち時間を 1s( 注意 ) 繰り返しを infinite 実行方向は normal で指定します.dots2 { animation: dotsanime 3s ease-in 1s infinite normal; -webkit-animation: dotsanime 3s ease-in 1s infinite normal; class セレクタ.dots3 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 3s イージングを ease-in 開始待ち時間を 2s 注意 ) 繰り返しを infinite 実行方向は normal で指定します.dots3 { animation: dotsanime 3s ease-in 2s infinite normal; -webkit-animation: dotsanime 3s ease-in 2s infinite normal; アニメーション名 dotsanime に対応するタイムライン (@keyframes) を指定します 0% で位置を top: 250px; left: 300px; サイズを width: 0px; height: 0px; で指定し opacity: 0.0; で見えないようにしておきます 1% で位置とサイズはそのままで opacity: 0.8; に変化させて見えるようにします 1% から 100% の間にそれぞれの星の元の位置サイズに戻し opacity dotsanime { 0% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; 1% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; 100% dotsanime { 0% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; 1% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; 100% { 24

25 星がブラックホールに吸い込まれるアニメーションサンプル CSS3 星が永久にブラックホールに吸い込まれ続けます BlackHole の説明 HTML の記述 (BlackHole.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 gravity1 の div 要素を記述しその中に span 要素を5つ記述します id 属性 gravity2 の div 要素を記述しその中に span 要素を4つ記述します id 属性 dotgroup1 の div 要素を記述しその中に id 属性 dot01 から dot12 の12 個の div 要素を記述します 12 個の div 要素に dots1 dots2 dots3 の順で class 属性を付けます id 属性 dotgroup2 の div 要素を記述しその中に id 属性 dot13 から dot24 の12 個の div 要素を記述します 12 個の div 要素に dots3 dots1 dots2 の順で class 属性を付けます <!DOCTYPE html> <html> <head> <title>blackhole</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="blackhole.css"> </head> <body> <p> class セレクタを活用してブラックホールを作る </p> <div id="stage"> <div id="gravity1"><span></span><span></span><span></span><span></span> <span></span></div> 25

26 <div id="gravity2"><span></span><span></span><span></span><span></span> <span></span></div> <div id="dotgroup1"> <div id="dot01" class="dots1"></div> <div id="dot02" class="dots2"></div> <div id="dot03" class="dots3"></div> <div id="dot04" class="dots1"></div> <div id="dot05" class="dots2"></div> <div id="dot06" class="dots3"></div> <div id="dot07" class="dots1"></div> <div id="dot08" class="dots2"></div> <div id="dot09" class="dots3"></div> <div id="dot10" class="dots1"></div> <div id="dot11" class="dots2"></div> <div id="dot12" class="dots3"></div> </div> <div id="dotgroup2"> <div id="dot13" class="dots3"></div> <div id="dot14" class="dots1"></div> <div id="dot15" class="dots2"></div> <div id="dot16" class="dots3"></div> <div id="dot17" class="dots1"></div> <div id="dot18" class="dots2"></div> <div id="dot19" class="dots3"></div> <div id="dot20" class="dots1"></div> <div id="dot21" class="dots2"></div> <div id="dot22" class="dots3"></div> <div id="dot23" class="dots1"></div> <div id="dot24" class="dots2"></div> </div> </div> </body> </html> CSS の記述 (BlackHole.css) #stage ステージのスタイルを指定します width は 600px height は 500px で指定します背景色を background: radial-gradient(# %, # %, #444488); で中央を黒色で周囲を暗い藍色で徐々に外側へ向かって薄い藍色に変化する円形グラデーションにします星がボックスからはみ出るので overflow: hidden; を指定します #stage { width: 600px; height: 500px; background: radial-gradient(# %, # %, #444488); background: -webkit-radial-gradient(# %, # %, #444488); position: relative; overflow: hidden; 26

背景の重力場を描く #gravity1 > span:nth-child(3) #gravity2 > span:nth-child(1) #gravity1 > span:nth-child(1) #gravity2 > span:nth-child(2) #gravity1 > span:nth-child(5) #gravity2 > span:nth-child(3) #gravity1

27 背景の重力場を描く #gravity1 > span:nth-child(3) #gravity2 > span:nth-child(1) #gravity1 > span:nth-child(1) #gravity2 > span:nth-child(2) #gravity1 > span:nth-child(5) #gravity2 > span:nth-child(3) #gravity1 > span:nth-child(2) #gravity2 > span:nth-child(4) #gravity1 > span:nth-child(4) #gravity2 > span:nth-child(5) #gravity1 要素 ( 背景の放物線を描く重力線 ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定します #gravity1 { top: 0px; left: 0px; width: 600px; height: 500px; #gravity1 > span:nth-child(1) 要素 ( 放物線を描く重力線 1) のスタイルを指定します position は absolute 位置は top: -257px; left: -50px;(#gravity1 ボックスの左上端を起点とした位置 ) で指定します width は 700px height は 500px で指定しますボーダーを border: 1px solid #666666; ( 薄い灰色 ) で指定し border-radius: 50%; で楕円形にします背景色を background-color: transparent;( 無色透明 ) にします #gravity1 > span:nth-child(2) 要素 ( 放物線を描く重力線 2 ) から #gravity1 > span:nth-child(4) 要素 ( 放物線を描く重力線 4 ) のスタイルは #gravity1 > span:nth-child(1) 要素 ( 放物線を描く重力線 1) と top left width height だけが違います #gravity1 > span:nth-child(1) { top: -257px; left: -50px; width: 700px; height: 500px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; 27

28 #gravity1 > span:nth-child(2) { top: 257px; left: -50px; width: 700px; height: 500px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity1 > span:nth-child(3) { top: -665px; left: 150px; width: 300px; height: 900px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity1 > span:nth-child(4) { top: 265px; left: 150px; width: 300px; height: 900px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity1 > span:nth-child(5) 要素 ( ブラックホールの中央 ) のスタイルを指定します position は absolute 位置は top: 229px; left: 275px;(#gravity1 ボックスの左上端を起点とした位置 ) で指定します width は 50px height は 42px で指定します border-radius: 50%; で楕円形にします背景色を background-color: #000000;( 黒色 ) にします #gravity1 > span:nth-child(5) { top: 229px; left: 275px; width: 50px; height: 42px; border-radius: 50%; background-color: #000000; #gravity2 要素 ( 背景の楕円形の重力線 ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定します #gravity2 { top: 0px; left: 0px; width: 600px; height: 500px; 28

29 #gravity2 > span:nth-child(1) 要素 ( 楕円形の重力線 1) のスタイルを指定します position は absolute 位置は top: 21px; left: 25px;(#gravity2 ボックスの左上端を起点とした位置 ) で指定します width は 550px height は 458px で指定しますボーダーを border: 1px solid #666666; ( 薄い灰色 ) で指定し border-radius: 50%; で楕円形にします背景色を background-color: transparent;( 無色透明 ) にします #gravity2 > span:nth-child(2) 要素 ( 楕円形の重力線 2 ) から #gravity2 > span:nth-child(5) 要素 ( 楕円形の重力線 5) のスタイルは #gravity2 > span:nth-child(1) 要素 ( 楕円形の重力線 1) と top left width height だけが違います #gravity2 > span:nth-child(1) { top: 21px; left: 25px; width: 550px; height: 458px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity2 > span:nth-child(2) { top: 125px; left: 150px; width: 300px; height: 250px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity2 > span:nth-child(3) { top: 188px; left: 225px; width: 150px; height: 125px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity2 > span:nth-child(4) { top: 208px; left: 250px; width: 100px; height: 83px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; #gravity2 > span:nth-child(5) { top: 225px; left: 270px; width: 60px; height: 50px; border: 1px solid #666666; border-radius: 50%; background-color: transparent; 29

30 #dotgroup1 要素 ( 星グループ1) およびその子供要素である #dot01 要素 ( 星 01) から #dot12 要素 ( 星 12) のスタイルは前述のサンプルCSS2の WarpDots.css と同じです #dotgroup2 要素 ( 星グループ2) およびその子供要素である #dot13 要素 ( 星 13) から #dot24 要素 ( 星 24) のスタイルも前述のサンプルCSS2の WarpDots.css と同じです class セレクタ.dots1 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 3s イージングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* クラスを使用して複数の星を一気に動かす ***************************/.dots1 { animation: dotsanime 3s ease-in 0s infinite normal; -webkit-animation: dotsanime 3s ease-in 0s infinite normal; class セレクタ.dots2 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 3s イージングを ease-in 開始待ち時間を 1s( 注意 ) 繰り返しを infinite 実行方向は normal で指定します.dots2 { animation: dotsanime 3s ease-in 1s infinite normal; -webkit-animation: dotsanime 3s ease-in 1s infinite normal; class セレクタ..dots3 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 3s イージングを ease-in 開始待ち時間を 2s( 注意 ) 繰り返しを infinite 実行方向は normal で指定します.dots3 { animation: dotsanime 3s ease-in 2s infinite normal; -webkit-animation: dotsanime 3s ease-in 2s infinite normal; アニメーション名 dotsanime に対応するタイムライン (@keyframes) を指定します 0% から 99% の間にそれぞれの星の位置を最初の位置から top: 250px; left: 300px; にサイズを最初のサイズから width: 0px; height: 0px; に opacity: 1.0; から opacity: 0.8; に変化させます 99% から 100% の間に位置とサイズはそのままで opacity: 0.0; に変化させて見ないようにします 30

@keyframes dotsanime { 0% { 99% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; 100% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.

31 @keyframes dotsanime { 0% { 99% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; 100% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: dotsanime { 0% { 99% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.8; 100% { top: 250px; left: 300px; width: 0px; height: 0px; opacity: 0.0; 泡が湧き出てくるアニメーションサンプル CSS4 泡がプクプクと永久に湧き出てきます Bubbles の説明 HTML の記述 (Bubbles.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 dotgroup1 の div 要素を記述しその中に id 属性 dot01 から dot12 の 12 個の div 要素を記述します 12 個の div 要素に class 属性 dots1 を付けます id 属性 dotgroup2 の div 要素を記述しその中に id 属性 dot13 から dot24 の 12 個の div 要素を記述します 12 個の div 要素に class 属性 dots2 を付けます 31

32 <!DOCTYPE html> <html> <head> <title>bubbles</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="bubbles.css"> </head> <body> <p> class セレクタを活用して泡立ちを作る </p> <div id="stage"> <div id="dotgroup1"> <div id="dot01" class="dots1"></div> <div id="dot02" class="dots1"></div> <div id="dot03" class="dots1"></div> <div id="dot04" class="dots1"></div> <div id="dot05" class="dots1"></div> <div id="dot06" class="dots1"></div> <div id="dot07" class="dots1"></div> <div id="dot08" class="dots1"></div> <div id="dot09" class="dots1"></div> <div id="dot10" class="dots1"></div> <div id="dot11" class="dots1"></div> <div id="dot12" class="dots1"></div> </div> <div id="dotgroup2"> <div id="dot13" class="dots2"></div> <div id="dot14" class="dots2"></div> <div id="dot15" class="dots2"></div> <div id="dot16" class="dots2"></div> <div id="dot17" class="dots2"></div> <div id="dot18" class="dots2"></div> <div id="dot19" class="dots2"></div> <div id="dot20" class="dots2"></div> <div id="dot21" class="dots2"></div> <div id="dot22" class="dots2"></div> <div id="dot23" class="dots2"></div> <div id="dot24" class="dots2"></div> </div> </div> </body> </html> CSS の記述 (Bubbles.css) #stage ステージのスタイルを指定します width は 600px height は 500px で指定しますボーダーを border: 1px solid orange;( オレンジ色 ) で指定します背景色を background: radial-gradient(white 5%, yellow 70%, orange 150%); で中央が白色外側に向かって黄色からオレンジ色へ変化する円形グラデーションにします泡がボックスからはみ出るので overflow: hidden; を指定します 32

33 #stage { width: 600px; height: 500px; border: 1px solid orange; background: radial-gradient(white 5%, yellow 70%, orange 150%); background: -webkit-radial-gradient(white 5%, yellow 70%, orange 150%); position: relative; overflow: hidden; #dotgroup1 要素 ( 泡グループ 1) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定します #dotgroup1 { top: 0px; left: 0px; width: 600px; height: 500px; 以下は #dotgroup1 要素の子供要素 ( それぞれの泡 ) の位置およびサイズの初期値と色等を指定します #dot01 要素 ( 泡 01) から #dot12 要素 ( 泡 12) のスタイルを指定します position は absolute 位置は #dotgroup1 ボックスの左上端を起点とした位置で指定します #dot01 { top: -82px; left: -60px; width: 80px; height: 80px; border: solid 2px #FF9900; border-radius: 40px; #dot02 { top: -320px; left: 300px; width: 240px; height: 240px; border: solid 3px #FFCC66; border-radius: 120px; #dot03 { top: -52px; left: 600px; width: 50px; height: 50px; border: solid 1px #FF6666; border-radius: 25px; 33

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

35 #dot11 { top: 250px; left: -35px; width: 30px; height: 30px; border: solid 1px #FF6666; border-radius: 15px; #dot12 { top: 140px; left: -150px; width: 50px; height: 50px; border: solid 1px #CC6600; border-radius: 25px; #dotgroup2 要素 ( 泡グループ2) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定します #dotgroup2 要素の子供要素 ( それぞれの泡 ) である #dot13 要素 ( 泡 13) から #dot24 要素 ( 泡 24) は #dotgroup1 要素の子供要素 ( それぞれの泡 ) である #dot01 要素 ( 泡 01) から #dot12 要素 ( 泡 12) の位置およびサイズの初期値と色等を同じ値で指定していますそして #dotgroup2 要素を transform: rotatez(180deg); で時計回りに 180 度回転させています #dotgroup1 要素の泡とは上下逆にして泡が放射状に動くようにしています ( 余りたくさんの泡のスタイルを決めるのが面倒だから逆にしてしまったという理由もありますごめんなさいでもアニメーションをみていただけばこれがなかなか旨くいっているのが分かると思います ) #dotgroup2 { top: 0px; left: 0px; width: 600px; height: 500px; transform: rotatez(180deg); -webkit-transform: rotatez(180deg); 以下は #dotgroup2 要素の子供要素 ( それぞれの泡 ) の位置およびサイズの初期値と色等を指定します #dot13 要素 ( 泡 13) から #dot24 要素 ( 泡 24) のスタイルを指定します position は absolute 位置は #dotgroup2 ボックスの左上端を起点とした位置で指定します 35

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

37 #dot20 { top: 650px; left: 110px; width: 100px; height: 100px; border: solid 1px #CC6600; border-radius: 50px; #dot21 { top: 500px; left: 100px; width: 20px; height: 20px; border: solid 1px #FF9900; border-radius: 10px; #dot22 { top: 460px; left: -40px; width: 40px; height: 40px; border: solid 1px #FFCC66; border-radius: 20px; #dot23 { top: 250px; left: -35px; width: 30px; height: 30px; border: solid 1px #FF6666; border-radius: 15px; #dot24 { top: 140px; left: -150px; width: 50px; height: 50px; border: solid 1px #CC6600; border-radius: 25px; 泡を動かす技法として class セレクタを利用することで多数の泡を一気に動かしますここでは2つの class セレクタを使用して泡を2パターンに分けて動かします class セレクタ.dots1 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 5s イージングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します /* クラスを使用して複数の泡を一気に動かす ***************************/.dots1 { animation: dotsanime 5s ease-in 0s infinite normal; -webkit-animation: dots1anime 5s ease-in 0s infinite normal; 37

38 class セレクタ.dots2 に属する要素のアニメーションの指定をしますアニメーション名を dotsanime 実行時間を 6s イージングを ease-in 開始待ち時間を 2.5s( 注意 ) 繰り返しを infinite 実行方向は normal で指定します.dots2 { animation: dotsanime 6s ease-in 2.5s infinite normal; -webkit-animation: dotsanime 6s ease-in 2.5s infinite normal; アニメーション名 dotsanime に対応するタイムライン (@keyframes) を指定します 0% で位置を top: 250px; left: 305px; サイズを width: 0px; height: 0px; で指定し opacity: 0.5; で半透明にしておきます 0% から 100% の間にそれぞれの泡の元の位置サイズに戻し opacity dotsanime { 0% { top: 250px; left: 305px; width: 0px; height: 0px; opacity: 0.5; 100% dotsanime { 0% { top: 250px; left: 305px; width: 0px; height: 0px; opacity: 0.5; 100% { 38

39 角丸四角形のワープアニメーションサンプル CSS5 角丸四角形が次々と永久に湧き出てきます WarpRects の説明 HTML の記述 (WarpRects.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 rectgroup の div 要素を記述しその中に class 属性 rect id 属性 rect01 から rect24 の24 個の div 要素を記述します <!DOCTYPE html> <html> <head> <title>warprects</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="warprects.css"> </head> <body> <p> class セレクタを活用して角丸四角形のワープ状態を作る </p> <div id="stage"> <div id="rectgroup"> <div class="rect" id="rect01"></div> <div class="rect" id="rect02"></div> <div class="rect" id="rect03"></div> <div class="rect" id="rect04"></div> <div class="rect" id="rect05"></div> <div class="rect" id="rect06"></div> <div class="rect" id="rect07"></div> <div class="rect" id="rect08"></div> <div class="rect" id="rect09"></div> <div class="rect" id="rect10"></div> <div class="rect" id="rect11"></div> 39

40 <div class="rect" id="rect12"></div> <div class="rect" id="rect13"></div> <div class="rect" id="rect14"></div> <div class="rect" id="rect15"></div> <div class="rect" id="rect16"></div> <div class="rect" id="rect17"></div> <div class="rect" id="rect18"></div> <div class="rect" id="rect19"></div> <div class="rect" id="rect20"></div> <div class="rect" id="rect21"></div> <div class="rect" id="rect22"></div> <div class="rect" id="rect23"></div> <div class="rect" id="rect24"></div> </div> </div> </body> </html> CSS の記述 (WarpRects.css) #stage ステージのスタイルを指定します width は 600px height は 500px で指定しますボーダーを border: 1px solid #000000;( 黒色 ) で指定します角丸四角形がボックスからはみ出るので overflow: hidden; を指定します #stage { width: 600px; height: 500px; border: 1px solid #000000; position: relative; overflow: hidden; #rectgroup 要素 ( 角丸四角形グループ ) のスタイルを指定します position は absolute 位置は top: 0px; left: 0px;(#stage ボックスの左上端を起点とした位置 ) で指定します width は 600px height は 500px で指定しますアニメーション名を groupanime 実行時間を 60s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #rectgroup { top: 0px; left: 0px; width: 600px; height: 500px; animation: groupanime 60s linear 0s infinite normal; -webkit-animation: groupanime 60s linear 0s infinite normal; 40

41 アニメーション名 groupanime に対応するタイムラインを指定します 0% から 100% の間に transform: rotatez(360deg); で時計回りに 360 度回転させます角丸四角 groupanime { 0% { transform: rotatez(0deg); 100% { transform: groupanime { 0% { transform: rotatez(0deg); 100% { -webkit-transform: rotatez(360deg); 角丸四角形を次々と発生させるためにつぎのような技法を使っています lass セレクタを利用することで多数の角丸四角形の共通の初期値 ( 最大になった時の位置サイズボーダーの幅など ) を指定しますそれぞれの角丸四角形を 0.25s の間隔でアニメーションを動かし #rectgroup ボックス ( つまり #stage ボックスと同様 ) の中心から発生し拡大していくようにしますまず class セレクタ.rect の指定をしますこれは多数の角丸四角形の共通の初期値 ( 最大になった時の位置サイズボーダーの幅など ) になります.rect { top: -50px; left: -50px; width: 700px; height: 600px; border-width: 15px; border-style: solid; border-radius: 50px; opacity: 0.0; つぎにそれぞれの角丸四角形ごとにアニメーション ( アニメーション名 rectanime) の指定をしますがそれぞれ開始待ち時間が違うだけでアニメーションの内容は同じなので先にアニメーション名 rectanime に対応するタイムライン (@keyframes) を指定します 0% で位置を top: 250px; left: 300px; サイズを width: 0px; height: 0px; ボーダー幅を border-width: 0px; 角の丸みを border-radius: 0px; で指定し opacity: 0.0; で見えないようにしておきます 1% で位置サイズボーダー幅角の丸みはそのままで opacity: 0.8; に変化させて見えるようにします 0% から 100% の間にそれぞれの角丸四角形の元の位置サイズボーダー幅角の丸み opacity を元に (.rect で指定した初期値に ) 戻します 41

42 @keyframes rectanime { 0% { top: 250px; left: 300px; width: 0px; height: 0px; border-width: 0px; border-radius: 0px; opacity: 0.0; 1% { top: 250px; left: 300px; width: 0px; height: 0px; border-width: 0px; border-radius: 0px; opacity: 0.8; 100% rectanime { 0% { top: 250px; left: 300px; width: 0px; height: 0px; border-width: 0px; border-radius: 0px; opacity: 0.0; 1% { top: 250px; left: 300px; width: 0px; height: 0px; border-width: 0px; border-radius: 0px; opacity: 0.8; 100% { 以下は #rectgroup 要素の子供要素 ( それぞれの角丸四角形 ) のボーダーの色およびアニメーションの指定 ( それぞれ開始待ち時間が 0.25s ずつ違います ) をします #rect01 { border-color: red; animation: rectanime 6s ease-in 0s infinite normal; -webkit-animation: rectanime 6s ease-in 0s infinite normal; #rect02 { border-color: blue; animation: rectanime 6s ease-in 0.25s infinite normal; -webkit-animation: rectanime 6s ease-in 0.25s infinite normal; #rect03 { border-color: gray; animation: rectanime 6s ease-in 0.5s infinite normal; -webkit-animation: rectanime 6s ease-in 0.5s infinite normal; #rect04 { border-color: pink; animation: rectanime 6s ease-in 0.75s infinite normal; -webkit-animation: rectanime 6s ease-in 0.75s infinite normal; #rect05 { border-color: orange; animation: rectanime 6s ease-in 1.0s infinite normal; -webkit-animation: rectanime 6s ease-in 1.0s infinite normal; #rect06 { border-color: darkviolet; animation: rectanime 6s ease-in 1.25s infinite normal; -webkit-animation: rectanime 6s ease-in 1.25s infinite normal; 42

43 #rect07 { border-color: sandybrown; animation: rectanime 6s ease-in 1.5s infinite normal; -webkit-animation: rectanime 6s ease-in 1.5s infinite normal; #rect08 { border-color: green; animation: rectanime 6s ease-in 1.75s infinite normal; -webkit-animation: rectanime 6s ease-in 1.75s infinite normal; #rect09 { border-color: yellow; animation: rectanime 6s ease-in 2s infinite normal; -webkit-animation: rectanime 6s ease-in 2s infinite normal; #rect10 { border-color: cyan; animation: rectanime 6s ease-in 2.25s infinite normal; -webkit-animation: rectanime 6s ease-in 2.25s infinite normal; #rect11 { border-color: magenta; animation: rectanime 6s ease-in 2.5s infinite normal; -webkit-animation: rectanime 6s ease-in 2.5s infinite normal; #rect12 { border-color: lightgreen; animation: rectanime 6s ease-in 2.75s infinite normal; -webkit-animation: rectanime 6s ease-in 2.75s infinite normal; #rect13 { border-color: red; animation: rectanime 6s ease-in 3s infinite normal; -webkit-animation: rectanime 6s ease-in 3s infinite normal; #rect14 { border-color: blue; animation: rectanime 6s ease-in 3.25s infinite normal; -webkit-animation: rectanime 6s ease-in 3.25s infinite normal; #rect15 { border-color: gray; animation: rectanime 6s ease-in 3.5s infinite normal; -webkit-animation: rectanime 6s ease-in 3.5s infinite normal; #rect16 { border-color: pink; animation: rectanime 6s ease-in 3.75s infinite normal; -webkit-animation: rectanime 6s ease-in 3.75s infinite normal; 43

44 #rect17 { border-color: orange; animation: rectanime 6s ease-in 4s infinite normal; -webkit-animation: rectanime 6s ease-in 4s infinite normal; #rect18 { border-color: darkviolet; animation: rectanime 6s ease-in 4.25s infinite normal; -webkit-animation: rectanime 6s ease-in 4.25s infinite normal; #rect19 { border-color: sandybrown; animation: rectanime 6s ease-in 4.5s infinite normal; -webkit-animation: rectanime 6s ease-in 4.5s infinite normal; #rect20 { border-color: green; animation: rectanime 6s ease-in 4.75s infinite normal; -webkit-animation: rectanime 6s ease-in 4.75s infinite normal; #rect21 { border-color: yellow; animation: rectanime 6s ease-in 5s infinite normal; -webkit-animation: rectanime 6s ease-in 5s infinite normal; #rect22 { border-color: cyan; animation: rectanime 6s ease-in 5.25s infinite normal; -webkit-animation: rectanime 6s ease-in 5.25s infinite normal; #rect23 { border-color: magenta; animation: rectanime 6s ease-in 5.5s infinite normal; -webkit-animation: rectanime 6s ease-in 5.5s infinite normal; #rect24 { border-color: lightgreen; animation: rectanime 6s ease-in 5.75s infinite normal; -webkit-animation: rectanime 6s ease-in 5.75s infinite normal; 44

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します背景色を黒色で指定します画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーションサンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し