animation
動きがあると表減が広がります。animation-name: abc;
abcという名前の動きをなぞることができます。@keyframes abc{...}
abcの内容を書く場所です。{left: 0vw;top: 0vw;} のように座標を列記することができます。animation-duration: 10s;
10秒間で動かせます。実行結果
正方形が動きます。
用意するのはdivタグ1つです。10vwX10vwの大きさと色を付けます。可視度を半分にしました。
強調された3行でアニメーションを行います。3行目は繰り返しの指示です。
プログラム
HTML <div class="div">四角形</div>
/*CSS*/ .div{ width: 10vw;height:10vw; position:relative; left: 0vw;top: 0vw; background-color: #f88; color: white;opacity: 0.5; animation-name: abc; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes abc{ 0%{left: 0vw;top: 0vw;} 20%{left: 10vw;top: 0vw;} 40%{left: 10vw;top: 10vw;} 60%{left: 20vw;top: 10vw;} 80%{left: 20vw;top: 20vw;} 100%{left: 30vw;top: 30vw;} }
備考
animation-iteration-count: infinite;
iteration(イテレーション)反復infinite(インフィニト)"無数の"
@keyframes 名前{...}の中に動きの内容を書きます。
name変更
実行結果
3次元アニメ-ション
transform-style: preserve-3d;
transform-style:
変形させる...形・方法preserve-3d;プレサーブ
要素の子要素を 3D 空間に配置します。flat
要素の子要素を要素自身の平面上に配置します。animation:
動画・アニメーションanimation:aa 10s infinite
aaの動きどを10秒間 何回も繰り返します。実行結果
cubeContainerキューブコンテナの中のcubeキューブに cubeSurfaceサーフェイス(面)を張り付けました。
A
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
5vwX5vwのdivと比較してください。
離れたところから見ているので,軸を含めて少し小さくなります。プログラム
HTML
<div class="cubeContainer">
<div class="cube">
<div class = "cubeSurface cubeSurface0">0</div>
</div>
</div>
/*CSS*/
.cubeContainer{
width: 5vw;height:5vw;margin:0vw;
perspective:26vw;}
.cube {
width: 5vw;height: 5vw;margin:0vw;
transform-style: preserve-3d;
animation:aa 15s infinite;
}
.cube .cubeSurface{/*.cubeの中の.surface*/
position: absolute;
box-sizing: border-box;
width:5vw;height:5vw;margin:0vw;
border:0.1vw solid #234;
text-align:center;
font-size:3vw;
}
.cubeSurface0{background:#ff0;}
考察
cubeと言ってもただの四角です。 cubeSurface0がcubeを実体化させたものです。.cube .cubeSurface{...}で形を作っています。 色と場所は各surfaceで決めます。 transform-style:でpreserve-3d;として3Dの形を作ります。
animation:で動きの記録名"aa"と時間,回数を指定します。
動きの記録
@keyframes 名前
@keyframesは名前を付けて動きを記録する場所です。解説
0%,はじめは角度0degから始めます。30%まではY軸(縦線)の周りを360度回転します。
60%まではX軸(横線)の周りを360度回転します。
90%まではZ軸(画面から手前に向かってくる線)の周りを360度回転します。
100%まで最後の10%で全ての軸周りを360度から0度に戻します。忙しい回転です。
プログラム
@keyframes aa{
0%{transform:rotateX(0deg)
rotateY(0deg)rotateZ(0deg);}
30%{transform:rotateX(0deg)
rotateY(360deg)rotateZ(0deg);}
60%{transform:rotateX(360deg)
rotateY(360deg)rotateZ(0deg);}
90%{transform:rotateX(360deg)
rotateY(360deg)rotateZ(360deg);}
100%{transform:rotateX(0deg)
rotateY(0deg)rotateZ(0deg);}
}
transform:rotateX(〇deg)X軸周りに〇度,回転させます。
transform:rotateY(〇deg)
Y軸周りに〇度,回転させます。
transform:rotateZ(〇deg)
Z軸周りに〇度,回転させます。
説明
2D用,3D用 共用
2D用も3D用も共通に使うことができる場合があります。animation:abc 30s infinite;を使った場合 animation-name:で名前を変更することはできません。
#pause3:checked ~ label .cube{
animation:abb 10s infinite;}
一時停止
アニメーションを途中で止めます。animation-play-state:
paused;
止まります。running;
動きます。実行結果
z軸方向に2.5vw移動した図形を動かします。
アニメーションを途中で止めるボタンです。
perspective:は見る場所の距離です。
プログラム
HTML
<input type="checkbox" id="pause4" class="stop">
<label for="pause4" class="pause">pause
<div class="cubeContainer">
<div class="cube">
<div class = "cubeSurface cubeSurface1">1</div>
</div>
</div>
</div>
</label>
CSS
.cubeContainer0{
width: 5vw;height:5vw;margin:0vw;
perspective:26vw;
}
.cube{/*動かすもの*/
width:5vw;height:5vw;margin:0vw;
transform-style: preserve-3d;
animation:aa 15s infinite;
}
.cube .cubeSurface{/*.cubeの中の.surface*/
position: absolute;
box-sizing: border-box;
width:5vw;height:5vw;margin:0vw;
border:0.1vw solid #143;
text-align:center;
font-size:3vw;
}
/*z軸方向に2.5vw移動した図形*/
.cubeSurface1 {background:#cc0;
transform:translateZ(2.5vw);}
#pause4:checked ~ label .cube{
animation-play-state: paused;}
備考
perspective-origin:
視点の位置です。100% 100%でも同じです。
視点から見た立体
視点が近すぎたり端によりすぎると. 空間を回転するのではなく,見え方のまま回転します。実行結果
1
2
3
4
5
6
0
1
0
2
0
3
0
4
0
5
0
6
1
2
3
4
5
6
cubeSurface1は回転させずに移動のみです。 cubeSurface3だけZ軸方向に3.9vw移動してみました。 張り付けるときのz軸方向の移動がわかります。
1
2
3
4
5
6
プログラム
HTML
<div class = "cubeContainer">
<div class = "cube">
<div class = "cubeSurface cubeSurface1">1</div>
<div class = "cubeSurface cubeSurface2">2</div>
<div class = "cubeSurface cubeSurface3">3</div>
<div class = "cubeSurface cubeSurface4">4</div>
<div class = "cubeSurface cubeSurface5">5</div>
<div class = "cubeSurface cubeSurface6">6</div>
</div>
</div>
/*CSS*/
.cubeContainer {
width: 5vw;height:5vw;margin:0vw;
perspective:6vw;
}
.cube {
width: 5vw;height: 5vw;margin:0vw;
transform-style: preserve-3d;
animation:aa 5s infinite
}
.cube .cubeSurface{
position: absolute;
box-sizing: border-box;
width:5vw;height:5vw;margin:0vw;
border:0.1vw solid #234;
text-align:center;
font-size:3vw;
}
.cubeSurface1 {background:#884;transform:
rotateY(0deg)translateZ(2.5vw);}
.cubeSurface2 {background:#88a;transform:
rotateX(-90deg)translateZ(2.5vw);}
.cubeSurface3 {background:#488;transform:
rotateY(90deg)translateZ(3.9vw);}
.cubeSurface4 {background:#a88;transform:
rotateY(-90deg)translateZ(2.5vw);}
.cubeSurface5 {background:#8a8;transform:
rotateX(90deg)translateZ(2.5vw);}
.cubeSurface6 {background:#848;transform:
rotateY(180deg)translateZ(2.5vw);}
@keyframes aa{
0%{transform:rotateX(0deg)
rotateY(0deg)rotateZ(0deg);}
30%{transform:rotateX(0deg)
rotateY(360deg)rotateZ(0deg);}
60%{transform:rotateX(360deg)
rotateY(360deg)rotateZ(0deg);}
90%{transform:rotateX(360deg)
rotateY(360deg)rotateZ(360deg);}
100%{transform:rotateX(0deg)
rotateY(0deg)rotateZ(0deg);}
}
考察
ものさし挿入
cubeSurface3だけにしてZ軸方向に3.9vw移動してみました。 xy軸を付けてみました。cubeSurface3bに張り付いて軸も動きます。0
3
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
z軸は表grんできていませんが,xy軸から想像できるように,cubeSurface0 の中心から離れる方向だと推測できます。
2,5,6はx軸を中心にして回転させているので, 縦回りの時に数字が正しく見えます。 3,4は横回りの時正しく見えます。6は倒立します。