1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので 一番使い易いです これから円運動 楕円運動 渦巻き運動の説明をしますが 円運動だけは上記の3つの方法で説明します 円運動 (1transform-origin プロパティで半径を作る ) サンプル CSS1 transform-origin プロパティで画像の変形の起点を移動し 円運動の半径を作り出して円運動をさせる方法です 円運動の中心点を思っている位置に置くのが少し難しいという欠点があります 左の図の中央の黒い点が移動して指定された transform-origin です ( 実際には点はありません ) 画像の中心点と transform-origin を結んだ線が半径になります 画像を回転させると円運動をします CircleAnime1 の説明 HTML の記述 (CircleAnime1.html) 画像が動くステージに stage という id を付けておきます その中にスペースシャトル 1
画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="circleanime1.css"> </head> <body> <p> 円運動させる (1)</p> <div id="stage"> <img src="images/spaceshuttle.png" alt="spaceshuttle"> </body> </html> CSS の記述 (CircleAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 400px; height: 400px; background-color: skyblue; を指定します #stage { width: 400px; height: 400px; background-color: skyblue; position: relative; スペースシャトル画像のスタイルを指定します スペースシャトル画像は top: 25px; left: 168px; と指定して #stage ステージの上部中央から始まるようにします transform-origin: 32px 175px;( または transform-origin: 50% 500%;) と指定して 変化の起点 ( 円運動の中心 ) を #stage ステージの中央 (top: 200px; left:200px;) と重なるようにします スペースシャトル画像はアニメーション名を anime1 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #stage img { top: 25px; left: 168px; width: 64px; height: 35px; /* border: solid 1px red; */ /* border を生かすと 画像のワクが見えます */ transform-origin: 32px 175px; -webkit-transform-origin: 32px 175px; 2
/* transform-origin: 50% 500%; -webkit-transform-origin: 50% 500%; */ animation: anime1 5s linear 0s infinite normal; -webkit-animation: anime1 5s linear 0s infinite normal; @keyframes anime1 { 0% { 100% { transform: rotatez(360deg); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: rotatez(360deg); アニメーション名 anime1 に対応するタイムライン (@keyframes) を指定します transform: rotatez(360deg); と指定して 時計回りに 360 度回転させます @keyframes anime1 { 0% { 100% { transform: rotatez(360deg); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: rotatez(360deg); 3
円運動 (2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する ) サンプル CSS2 transform-origin プロパティで画像の親要素ボックスの変形の起点を移動して円運動をさせ その中に画像を子要素として指定する方法です 親要素ボックスの辺の中央を円運動の中心点にすればよいので分かり易いです 左の図の中央の黒い点が移動して指定された親要素ボックスの transform-origin です ( 実際には点はありません ) 親要素ボックスを回転させると 画像が円運動をします top の値 ( 青い矢印 ) の値を変えると画像が回転する半径を変えることができます CircleAnime2 の説明 HTML の記述 (CircleAnime2.html) 画像が動くステージに stage という id を付けておきます 回転させるボックスに circlebox という id を付けて その中にスペースシャトル画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="circleanime2.css"> </head> <body> <p> 円運動させる (2)</p> <div id="stage"> <div id="circlebox"> <img src="images/spaceshuttle.png" alt="spaceshuttle"> </body> </html> 4
CSS の記述 (CircleAnime2.css) #stage ステージのスタイルを指定します #stage ステージは width: 400px; height: 400px; background-color: skyblue; を指定します 回転するボックスが多少 #stage ステージからはみ出るので overflow: hidden; と指定しておきます #stage { width: 400px; height: 400px; background-color: skyblue; position: relative; overflow: hidden; 回転する #circlebox ボックスのスタイルを指定します top: 0px; left: 168px; と指定して #stage ステージの上辺中央から始まるようにします transform-origin: 50% 100%; ( または transform-origin: 50% bottom) と指定して 変化の起点 ( 回転の中心 ) ボックスの下辺中央に指定し #stage ステージの中央 (top: 200px; left:200px;) と重なるようにします ボックスはアニメーション名を anime1 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #circlebox { top: 0px; left: 168px; width: 64px; height: 200px; /* border: solid 1px red; */ /* border を生かすと 回転するボックスが見えます */ transform-origin: 50% 100%; /* または 50% bottom */ -webkit-transform-origin: 50% 100%; /* または 50% bottom */ animation: anime1 5s linear 0s infinite normal; -webkit-animation: anime1 5s linear 0s infinite normal; アニメーション名 anime1 に対応するタイムライン (@keyframes) を指定します transform: rotatez(360deg); と指定して 時計回りに 360 度回転させます @keyframes anime1 { 0% { 100% { transform: rotatez(360deg); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: rotatez(360deg); 5
スペースシャトル画像のスタイルを指定します top: 20px; left: 0px; と指定して #circlebox ボックスの上辺から 20px の位置にしています #circlebox img { top: 20px; left: 0px; width: 64px; height: 35px; /* border: solid 1px red; */ /* top の値を変えることで 親ボックスの上辺からの距離を変えられます */ 円運動 (3 大きさのない親要素ボックスを回転させ 画像を子要素に指定す る ) サンプル CSS3 CircleAnime3 の説明 HTML の記述 (CircleAnime3.html) 画像の親要素ボックスを大きさのないボック スとして指定し 円運動の中心の位置に置いて 回転させ その子要素として画像を指定する方 法です 親要素ボックスを円運動の中心点にす ればよいので分かり易いです 左の図の中央の赤い点が大きさのない親要素 ボックスの位置です ( 実際には点はありませ ん ) transform-origin プロパティで変化 ( 回転 ) の起点を変更する必要はありません top の値 ( 青い矢印 ) の値を変えると画像が回 転する半径を変えることができます 画像が動くステージに stage という id を付けておきます 回転させるボックスに circlebox という id を付けて その中にスペースシャトル画像 images/ SpaceShuttle.png を指定します 6
<!DOCTYPE html> <html> <head> <title>circleanime3</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="circleanime3.css"> </head> <body> <p> 円運動させる (3)</p> <div id="stage"> <div id="circlebox"> <img src="images/spaceshuttle.png" alt="spaceshuttle"> </body> </html> CSS の記述 (CircleAnime3.css) #stage ステージのスタイルを指定します #stage ステージは width: 400px; height: 400px; background-color: skyblue; を指定します #stage { width: 400px; height: 400px; background-color: skyblue; position: relative; 回転する #circlebox ボックスのスタイルを指定します top: 200px; left: 200px; と指定して #stage ステージの中央に置きます width と height を指定しないので 大きさのないボックスになります ボックスはアニメーション名を anime1 実行時間を 5s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #circlebox { top: 200px; left: 200px; /* border: solid 1px red; */ /* border を生かすと 円運動の中心が見えます */ animation: anime1 5s linear 0s infinite normal; -webkit-animation: anime1 5s linear 0s infinite normal; アニメーション名 anime1 に対応するタイムライン (@keyframes) を指定します transform: 7
rotatez(360deg); と指定して 時計回りに 360 度回転させます @keyframes anime1 { 0% { 100% { transform: rotatez(360deg); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: rotatez(360deg); スペースシャトル画像のスタイルを指定します top: -180px; left: -32px; と指定して #circlebox ボックス ( 円運動の中心 ) から 180px の位置にしています #circlebox img { top: -180px; left: -32px; /* top の値を変えることで 中心からの距離を変えられます */ width: 64px; height: 35px; /* border: solid 1px red; */ 8
楕円運動 サンプル CSS4 円運動の 1 周の周期に合わせて円運動を左右に 1 回移動させると楕円運動になります 左 右の移動には animation-timing-function プロパティでイージングの調整が必要です 本 サンプルは CircleAnime3.html の円運動を左右に動かして楕円運動を作っています OvalAnime1 の説明 HTML の記述 (OvalAnime1.html) 画像が動くステージに stage という id を付けておきます 左右にスライドさせるボックスに slidebox という id を付けておきます 回転させるボックスに circlebox という id を付けて その中にスペースシャトル画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>ovalanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="ovalanime1.css"> </head> <body> <p> 楕円運動させる (1)</p> <div id="stage"> <div id="slidebox"> <div id="circlebox"> 9
<img src="images/spaceshuttle.png" alt="spaceshuttle"> <br> 円運動する画像を左右に移動することによって 楕円運動になります </body> </html> CSS の記述 (OvalAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 700px; height: 400px; background-color: skyblue; を指定します #stage { width: 700px; height: 400px; background-color: skyblue; position: relative; 左右にスライドする #slidebox ボックスのスタイルを指定します top: 0px; left: 150px; と指定して #stage ステージの中央に置きます width: 400px; height: 400px; と指定し CircleAnime3.css の #stage ステージと同じ大きさのボックスにします ボックスはアニメーション名を slideanime 実行時間を 10s イージングを linear( 注 ) 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します ( 注 : イージングはタイムライン (@keyframes) で変化させるので animation プロパティでの animation-timing-function の指定は省略しても構いませんが とりあえず初期値の linear で指定しておきます ) #slidebox { top: 0px; left: 150px; width: 400px; height: 400px; /* border: 1px solid red; */ /* border を生かすと スライドするボックスが見えます */ animation: slideanime 10s linear 0s infinite normal; -webkit-animation: slideanime 10s linear 0s infinite normal; アニメーション名 slideanime に対応するタイムライン (@keyframes) を指定します 0%~ 50%(5 秒 ) で右方向へ往復移動し 50%~100%(5 秒 ) で左方向へ往復移動させます 右方 向へ向かう時には animation-timing-function: ease-out; で 最初は早く後でゆっくりと 10
戻ってくる時には animation-timing-function: ease-in; で 最初はゆっくりで徐々に速く変化させます 左方向へ向かって戻ってくる時も同じようにします この animation-timing-function プロパティで変化をつけることで楕円運動をすることになります @keyframes slideanime { 0% { left: 150px; animation-timing-function: ease-out; 25% { left: 300px; animation-timing-function: ease-in; 50% { left: 150px; animation-timing-function: ease-out; 75% { left: 0px; animation-timing-function: ease-in; 100% { left: 150px; @-webkit-keyframes slideanime { 0% { left: 150px; -webkit-animation-timing-function: ease-out; 25% { left: 300px; -webkit-animation-timing-function: ease-in; 50% { left: 150px; -webkit-animation-timing-function: ease-out; 75% { left: 0px; -webkit-animation-timing-function: ease-in; 100% { left: 150px; 回転する #circlebox ボックスのスタイルを指定します top: 200px; left: 200px; と指定して #slidebox ボックスの中央に置きます width と height を指定しないので 大きさのないボックスになります ボックスはアニメーション名を circleanime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #circlebox { top: 200px; left: 200px; /* border: solid 1px red; */ /* border を生かすと 円運動の中心が見えます */ animation: circleanime 10s linear 0s infinite normal; -webkit-animation: circleanime 10s linear 0s infinite normal; アニメーション名 circleanime に対応するタイムライン (@keyframes) を指定します transform: rotatez(360deg); と指定して 時計回りに 360 度回転させます @keyframes circleanime { 0% { 100% { transform: rotatez(360deg); @-webkit-keyframes circleanime { 0% { 100% { -webkit-transform: rotatez(360deg); 11
スペースシャトル画像のスタイルを指定します top: -180px; left: -32px; と指定して #circlebox ボックス ( 円運動の中心 ) から 180px の位置にしています #circlebox img { top: -180px; left: -32px; /* top の値を変えることで 中心からの距離を変えられます */ width: 64px; height: 35px; /* border: solid 1px red; */ 楕円運動 ( 扁平な楕円 ) サンプル CSS5 円運動の1 周の周期に合わせて円運動を左右に1 回移動させると楕円運動になります 左右の移動には animation-timing-function プロパティでイージングの調整が必要です 本サンプルは CircleAnime3.html の円運動の半径を2 分の1にして扁平な楕円運動を作っています 扁平な楕円運動の場合は 円運動にも animation-timing-function プロパティでイージングの調整をしないと スペースシャトル画像の動きが不自然になります OvalAnime2 の説明 HTML の記述 (OvalAnime2.html) 画像が動くステージに stage という id を付けておきます 左右にスライドさせるボッ クスに slidebox という id を付けておきます 回転させるボックスに circlebox と いう id を付けて その中にスペースシャトル画像 images/ SpaceShuttle.png を指定しま す 12
<!DOCTYPE html> <html> <head> <title>ovalanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="ovalanime2.css"> </head> <body> <p> 楕円運動させる (2)</p> <div id="stage"> <div id="slidebox"> <div id="circlebox"> <img src="images/spaceshuttle.png" alt="spaceshuttle"> <br> 左右に動く距離を長くすると より平坦な楕円運動になります <br> 平坦な楕円の場合 円運動する画像の円を描く速度の調整が必要です </body> </html> CSS の記述 (OvalAnime2.css) #stage ステージのスタイルを指定します #stage ステージは width: 700px; height: 200px; background-color: skyblue; を指定します #stage { width: 700px; height: 200px; background-color: skyblue; position: relative; 左右にスライドする #slidebox ボックスのスタイルを指定します top: 0px; left: 250px; と指定して #stage ステージの中央に置きます width: 200px; height: 200px; と指定し CircleAnime3.css の #stage ステージの縦横 2 分の1の大きさのボックスにします ボックスはアニメーション名を slideanime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #slidebox { top: 0px; left: 250px; width: 200px; height: 200px; /* border: 1px solid red; */ /* border を生かすと スライドするボックスが見えます */ animation: slideanime 10s linear 0s infinite normal; -webkit-animation: slideanime 10s linear 0s infinite normal; 13
アニメーション名 slideanime に対応するタイムライン (@keyframes) を指定します 0%~ 50%(5 秒 ) で右方向へ往復移動し 50%~100%(5 秒 ) で左方向へ往復移動させます 右方向へ向かう時には animation-timing-function: ease-out; で 最初は早く後でゆっくりと 戻ってくる時には animation-timing-function: ease-in; で 最初はゆっくりで徐々に速く変化させます 左方向へ向かって戻ってくる時も同じようにします この animation-timing-function プロパティで変化をつけることで楕円運動をすることになります @keyframes slideanime { 0% { left: 250px; animation-timing-function: ease-out; 25% { left: 500px; animation-timing-function: ease-in; 50% { left: 250px; animation-timing-function: ease-out; 75% { left: 0px; animation-timing-function: ease-in; 100% { left: 250px; @-webkit-keyframes slideanime { 0% { left: 250px; -webkit-animation-timing-function: ease-out; 25% { left: 500px; -webkit-animation-timing-function: ease-in; 50% { left: 250px; -webkit-animation-timing-function: ease-out; 75% { left: 0px; -webkit-animation-timing-function: ease-in; 100% { left: 250px; 回転する #circlebox ボックスのスタイルを指定します top: 100px; left: 100px; と指定して #slidebox ボックスの中央に置きます width と height を指定しないので 大きさのないボックスになります ボックスはアニメーション名を circleanime 実行時間を 10s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #circlebox { top: 100px; left: 100px; /* border: solid 1px red; */ /* border を生かすと 円運動の中心が見えます */ animation: circleanime 10s linear 0s infinite normal; -webkit-animation: circleanime 10s linear 0s infinite normal; アニメーション名 circleanime に対応するタイムライン (@keyframes) を指定します transform: rotatez 関数で時計回りに 360 度回転させますが 90 度ごとに右方向へ向かう 時には animation-timing-function: ease-in; で 最初はゆっくりで徐々に速く 戻ってく る時には animation-timing-function: ease-out; で 最初は早く徐々にゆっくりと変化さ 14
せます 左方向へ向かって戻ってくる時も同じようにします #slidebox ボックスの animation-timing-function とは逆の指定になります @keyframes circleanime { 0% { transform: rotatez(0deg); animation-timing-function: ease-in; 25% { transform: rotatez(90deg); animation-timing-function: ease-out; 50% { transform: rotatez(180deg); animation-timing-function: ease-in; 75% { transform: rotatez(270deg); animation-timing-function: ease-out; 100% { transform: rotatez(360deg); @-webkit-keyframes circleanime { 0% { -webkit-transform: rotatez(0deg); -webkit-animation-timing-function: ease-in; 25% { -webkit-transform: rotatez(90deg); -webkit-animation-timing-function: ease-out; 50% { -webkit-transform: rotatez(180deg); -webkit-animation-timing-function: ease-in; 75% { -webkit-transform: rotatez(270deg); -webkit-animation-timing-function: ease-out; 100% { -webkit-transform: rotatez(360deg); スペースシャトル画像のスタイルを指定します top: -85px; left: -32px; と指定して #circlebox ボックス ( 円運動の中心 ) から 180px の位置にしています #circlebox img { top: -85px; left: -32px; /* top の値を変えることで 中心からの距離を変えられます */ width: 64px; height: 35px; /* border: solid 1px red; */ 15
渦巻き運動 (3 の方法を応用して ) サンプル CSS6 画像の親要素ボックスを大きさのないボックスとして指定し 回転の中心の位置に置いて回転させ その子要素として画像を指定し 画像の位置を回転の中心から徐々に遠ざけていくと渦巻き運動になります 左の図の中央の赤い点が大きさのない親要素ボックスの位置です ( 実際には点はありません ) SpiralAnime1 の説明 HTML の記述 (SpiralAnime1.html) 画像が動くステージに stage という id を付けておきます 回転させるボックスに circlebox という id を付けて その中に回転の中心から遠ざかるボックスに shuttlebox という id を付けて指定し その中にスペースシャトル画像 images/ SpaceShuttle.png を指定します <html> <head> <title>spiralanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="spiralanime1.css"> </head> <body> <p> 渦巻き運動させる (1)</p> <div id="stage"> <div id="circlebox"> <div id="shuttlebox"> <img src="images/spaceshuttle.png" alt="spaceshuttle"> </body> </html> 16
</body> </html> CSS の記述 (SpiralAnime1.css) #stage ステージのスタイルを指定します #stage ステージは width: 400px; height: 400px; background-color: skyblue; を指定します overflow: hidden; を指定して スペースシャトル画像が渦巻き運動をして #stage ステージの外に飛び出したら見えないようにします #stage { width: 400px; height: 400px; background-color: skyblue; position: relative; overflow: hidden; 回転する #circlebox ボックスのスタイルを指定します top: 200px; left: 200px; と指定して #stage ステージの中央に置きます width と height を指定しないので 大きさのないボックスになります ボックスはアニメーション名を anime1 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #circlebox { top: 200px; left: 200px; /* border: solid 1px red; */ /* border を生かすと 円運動の中心が見えます */ animation: anime1 20s linear 0s infinite normal; -webkit-animation: anime1 20s linear 0s infinite normal; アニメーション名 anime1 に対応するタイムライン (@keyframes) を指定します transform: rotatez(1440deg); と指定して 時計回りに 4 回転させます @keyframes anime1 { 0% { 100% { transform: rotatez(1440deg); 17
@-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: rotatez(1440deg); 中心から遠ざかる #shuttlebox ボックスのスタイルを指定します top: -55px; left: -32px; と指定して #circlebox ボックスから上方に 55px の位置に置きます width: 64px; height: 35px; で指定し スペースシャトル画像と同じ大きさのボックスにします ボックスはアニメーション名を anime2 実行時間を 20s イージングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #shuttlebox { top: -55px; left: -32px; /* top の値を変えることで 中心からの距離を変えられます */ width: 64px; height: 35px; /* border: solid 1px blue; */ animation: anime2 20s ease-in 0s infinite normal; -webkit-animation: anime2 20s ease-in 0s infinite normal; アニメーション名 anime2 に対応するタイムライン (@keyframes) を指定します top: -55px; から top: -250px; に移動させます @keyframes anime2 { 0% { 100% { top: -250px; @-webkit-keyframes anime2 { 0% { 100% { top: -250px; スペースシャトル画像のスタイルを指定します 渦巻きの方向に合わせてスペースシャトルの角度を最初は少し外側を向いて徐々に元に戻るようにするためアニメーションの指定をします アニメーション名を anime3 実行時間を 20s イージングを ease-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #shuttlebox img { top: 0px; left: 0px; width: 64px; height: 35px; /* border: solid 1px red; */ 18
animation: anime3 20s ease-out 0s infinite normal; -webkit-animation: anime3 20s ease-out 0s infinite normal; アニメーション名 anime3 に対応するタイムライン (@keyframes) を指定します transform: rotatez(-10deg); で反時計回りに 10 度から transform: rotatez(0deg); と指定して元に 戻します @keyframes anime3 { 0% { transform: rotatez(-10deg); 100% { transform: rotatez(0deg); @-webkit-keyframes anime3 { 0% { -webkit-transform: rotatez(-10deg); 100% { -webkit-transform: rotatez(0deg); 渦巻き運動 (2 の方法を応用して ) サンプル CSS7 画像の親要素ボックスを #stage ステージからはみ出る大きさのボックスとして指定し ボックスの transform-origin は下辺中央を回転の中心の位置に置いて回転させ その子要素として画像を指定し 画像の位置を回転の中心から徐々に遠ざけていくと渦巻き運動になります 左の図の中央の黒い点が移動して指定された親要素ボックスの transform-origin です ( 実際には点はありません ) SpiralAnime2 の説明 HTML の記述 (SpiralAnime2.html) 19
画像が動くステージに stage という id を付けておきます 回転させるボックスに circlebox という id を付けて その中に回転の中心から遠ざかるボックスに shuttlebox という id を付けて指定し その中にスペースシャトル画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>spiralanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="spiralanime2.css"> </head> <body> <p> 渦巻き運動させる (2)</p> <div id="stage"> <div id="circlebox"> <div id="shuttlebox"> <img src="images/spaceshuttle.png" alt="spaceshuttle"> </body> </html> CSS の記述 (SpiralAnime2.css) #stage ステージのスタイルを指定します #stage ステージは width: 400px; height: 400px; background-color: skyblue; を指定します overflow: hidden; を指定して スペースシャトル画像が渦巻き運動をして #stage ステージの外に飛び出したら見えないようにします #stage { width: 400px; height: 400px; background-color: skyblue; position: relative; overflow: hidden; 回転する #circlebox ボックスのスタイルを指定します top: -50px; left: 168px; と指定 して #stage ステージの上辺中央から始まるようにしますが #stage ステージより上方へ 50px 飛び出すようにします transform-origin: 50% 100%;( または transform-origin: 50% bottom) と指定して 変化の起点 ( 回転の中心 ) ボックスの下辺中央に指定し #stage ス テージの中央 (top: 200px; left:200px;) と重なるようにします ボックスはアニメーシ ョン名を anime1 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します 20
#circlebox { top: -50px; left: 168px; width: 64px; height: 250px; /* border: solid 1px red; */ /* border を生かすと 回転するボックスが見えます */ transform-origin: 50% 100%; /* または 50% bottom */ -webkit-transform-origin: 50% 100%; /* または 50% bottom */ animation: anime1 20s linear 0s infinite normal; -webkit-animation: anime1 20s linear 0s infinite normal; アニメーション名 anime1 に対応するタイムライン (@keyframes) を指定します transform: rotatez(1440deg); と指定して 時計回りに 4 回転させます @keyframes anime1 { 0% { 100% { transform: rotatez(1440deg); @-webkit-keyframes anime1 { 0% { 100% { -webkit-transform: rotatez(1440deg); 中心から遠ざかる #shuttlebox ボックスのスタイルを指定します top: 195px; left: 0px; と指定して #circlebox ボックスの上方から 195px の位置に置きます width: 64px; height: 35px; で指定し スペースシャトル画像と同じ大きさのボックスにします ボックスはアニメーション名を anime2 実行時間を 20s イージングを ease-in 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #shuttlebox { top: 195px; left: 0px; /* top の値を変えることで 中心からの距離を変えられます */ width: 64px; height: 35px; /* border: solid 1px blue; */ animation: anime2 20s ease-in 0s infinite normal; -webkit-animation: anime2 20s ease-in 0s infinite normal; アニメーション名 anime2 に対応するタイムライン (@keyframes) を指定します top: 195px; から top: 0px; に移動させます 21
@keyframes anime2 { 0% { top: 195px; 100% { top: 0px; @-webkit-keyframes anime2 { 0% { top: 195px; 100% { top: 0px; スペースシャトル画像のスタイルを指定します 渦巻きの方向に合わせてスペースシャトルの角度を最初は少し外側を向いて徐々に元に戻るようにするためアニメーションの指定をします アニメーション名を anime3 実行時間を 20s イージングを ease-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #shuttlebox img { top: 0px; left: 0px; width: 64px; height: 35px; /* border: solid 1px red; */ animation: anime3 20s ease-out 0s infinite normal; -webkit-animation: anime3 20s ease-out 0s infinite normal; アニメーション名 anime3 に対応するタイムライン (@keyframes) を指定します transform: rotatez(-10deg); で反時計回りに 10 度から transform: rotatez(0deg); と指定して元に 戻します @keyframes anime3 { 0% { transform: rotatez(-10deg); 100% { transform: rotatez(0deg); @-webkit-keyframes anime3 { 0% { -webkit-transform: rotatez(-10deg); 100% { -webkit-transform: rotatez(0deg); 22