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アニメーションができました。
コメント