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