cssでアニメーションをつくる方法（transition,transform)

transitionプロパティ

transitionを使ってアニメーションが作れます。

変更前（四角）の要素を作ります。

変更後（丸）の要素を作ります。

transition-property:border-radius;で変更後の要素を指定します。

transition-duration: 1s;で変更後までの時間を指定します。

四角から１秒後に丸になるCSSアニメーションができました。

transformプロパティを使って、要素自体に動かしてアニメーションが作れます。

transform: translate（X,Y）;　は、移動です。

transform: rotate（○deg）;　は、回転です。

transform: scale（X,Y）;　は、拡大縮小です。

transition-property: transform;で変更後の要素を指定します。

transition-duration: 1s;で変更後までの時間を指定します。