transitionプロパティ
transitionを使ってアニメーションが作れます。
変更前(四角)の要素を作ります。
変更後(丸)の要素を作ります。
transition-property:border-radius;で変更後の要素を指定します。
transition-duration: 1s;で変更後までの時間を指定します。
四角から1秒後に丸になるCSSアニメーションができました。
transformプロパティ
transformプロパティを使って、要素自体に動かしてアニメーションが作れます。
transform: translate(X,Y); は、移動です。
transform: rotate(○deg); は、回転です。
transform: scale(X,Y); は、拡大縮小です。
transition-property: transform;で変更後の要素を指定します。
transition-duration: 1s;で変更後までの時間を指定します。
コメント