css animation

移動(距離)

transform:translateX(00px); 横方向
transform:translateY(00px); 縦方向
transform:translate(00px, 00px); 横縦方向

 

回転(角度)

transform:rotate(00deg);

 

リサイズ()

transform:scaleX(0);  // 横方向のリサイズ
transform:scaleY(0);  // 縦方向のリサイズ
transform:scale(0, 0);  // 横縦方向のリサイズ

 

複数を同時に設定する場合順番によって結果が変わる

transform: translateX(100px) rotate(30deg); // X方向に100px移動してから30度回転するので右に移動する
transform: rotate(30deg) translateX(100px) ; // 30度回転してからX方向に100px移動するので斜め下方向に移動

 

アニメーションする軸を変える

transform_origin(top, left); // 左上が軸となる
rotateとscaleに有効

 

アニメーションを開始するまでの時間を設定

transition-delay:1s; // 1秒たってからアニメーションが始まる

 

高度なアニメーション

.box {
 animation-name: movie; // アニメーション movieという名前をつける
 animation-fill-mode: forwards; // アニメーションが終わった場所に留まらせる

 animation-duration: 2s; // アニメーションの時間

 animation-iteration-count: 2; // アニメーションを繰り返す回数を指定 
 animation-iteration-count: infinite;  // 無制限に繰り返す

 animation-direction: alternate; // アニメーションを折り返す 
 animation-direction: reverse; // アニメーション逆再生  alternate-reverse で逆再生して折り返し

 animation-timing-function: linear; // アニメーションの進行速度指定 keyframe内に各々書くことも可能

 animation: movie 2s infinite linear; // ショートハンドにまとめることも可能
}

@keyframe movie {  // キーフレームにアニメーションmovieを設定
 0% {
  transform: none;
 }
 50% {
  transform: translateX(100px) rotate(90deg);
 }
 100% {
  transform: translateX(200px) rotate(90deg);
 }
}

後日まとめる。

Pocket