transform-originプロパティ
transform-origin: ;を使うことで、回転と拡大縮小の起点位置を決められます。
transform:;で、回転や拡大縮小の指定をします。
transform: rotate（○deg）; は、回転です。
transform: scale（X,Y）; は、拡大縮小です。
transition-property: transform;で変更後の要素を指定します。
transition-duration: 1s;で変更後までの時間を指定します。
transform-origin: top left;で、変化の起点位置（今回は左上）を指定します。
左上から、回転や拡大縮小ができました。
移動アニメーションは起点を設定しても意味はありません。
色を変化される
transition-propertyを使うことで、色を変化させることができます。
変更前（むらさき色）の要素を作ります。
変更後（移動してあか色）の要素を作ります。
transform: translate（X,Y）; は、移動です。
transition-property:transiform, background-color;で変更後の要素を指定します。
transition-duration: 1s;で変更後までの時間を指定します。
移動しながら色が変化するCSSアニメーションができました。
コメント