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);
 }
}

後日まとめる。

Tweet

Pocket