chapter02.

transitionでアニメーションしてみよう

chapter03.

transformプロパティを使ってみよう

移動：transform: translateX();

回転：transform: rotate();

リサイズ：transform: scale(0.8, 0.8);

chapter04.

transformで図形を変形させよう

移動：transform: translate(50px, 20px);

回転：transform: rotate(30deg);

リサイズ：transform: scale(0.8, 0.8);

組み合わせて使う場合は各順番が重要：

transform: translateX(50px) rotate(30deg);

transform: rotate(30deg) transform: translateX(50px);

chapter05.

transform-originで動きの起点を変更しよう

設定ナシだと図形の中心を起点に変形

左上を起点に変形

chapter06.

transition-propatyを使ってみよう

transition-propaty: 使うプロパティを記載（全ての場合はall）;

chapter07.

transitionの時間を制御しよう

transition-duration: アニメーションの時間;

transition-delay: アニメーションが始まるまでの時間;

chapter08.

transition-timing-functionを使ってみよう

アニメーションの速度に緩急をつけることができるプロパティ

ease：既定値

ease-out：小さいUI部品

ease-in-out：大きいUI部品

linear：回転する部品など（一定）

chapter09.

デベロッパーツールで細かい調整

transition-timing-function: cubic-bezier(0.38, 0.37, 0.68, 2.02);

chapter10.

transitionの一括指定プロパティを使おう

順不同かつ省略可：transition: transform .3s ease-out 1s, background .5s;

chapter11.

高度なアニメーションを設定しよう

animationとtransitionの違い

・変化前・変化後だけでなく、その途中にも設定できる

・繰り返し使用できる

animationの設定方法

@keyframesの設定方法

① @keyframes move {
0% { transform: ・・・}
50% { transform: ・・・}
100% { transform: ・・・}
}

② animationの設定

animation-name: move;

animation-duration: 2s;

chapter12.

@keyframesを設定してみよう

chapter13.

アニメーションを細かく制御しよう

animation-fill-mode: forwards; 終わった位置に留まる

animation-iteration-count: 2; 回数を設定

animation-fill-mode: forwards; 無限に繰り返す

chapter14.

再生順を制御してみよう

animation-direction: alternate; 折り返す

animation-direction: alternate-reverse; 逆再生

animation-timing-function: linear; 全てのキーフレーム間のアニメーション設定

animation-timing-function: linear; フレームごとに設定（最初だけ）