transform

transformとは要素に変形を適用させるプロパティです transformの中にそれぞれ値が指定でき、回転、移動、収縮などがあります。

transform:rotate

trancformの中のrotateは主に回転を制御します Y軸X軸Z軸などそれぞれ設定することができます

transform:translate

trancformの中のtranslateは主に移動を制御します Y軸X軸Z軸などそれぞれ設定することができ要素の表示位置などを変更する際に便利です

transform:scale

trancformの中のscaleは主に縮尺比率を指定する際に使用します 拡大したり縮小したりなどが可能です

transition

transitionとは要素に時間を指定することによって様々な効果を与えるプロパティになります

transition-property

trancform(時間的効果)を与えたいcssプロパティ名を指定するときに主に使用します

transitions-timing-function

変化のタイミング・進行割合を指定することができます 変化の割合などを設定できより滑らかなモーションを再現できます

transitions-duration

Transitions-durationは変化にかかる時間を指定することができます 早くしたり遅くしたりなどそれぞれ可能です

animations

animationsとは要素をキーフレームアニメーション形式で動かすためのプロパティです

animations-name

animation-nameプロパティは、要素にキーフレームアニメーションを適用する場合の、 アニメーション名を指定する際に使用します

animation-duration

アニメーション一回分の時間の長さを指定します アニメーションの間隔などを設定する際に使用できます

animation-timing-function

TTransitions-timing-functionのanimationVerです こちらも同様にタイミングなどを設定できます

animation-iteration-count

アニメーションの回数を設定できます ある回数のみに指定するなど幅広く使用できます

animations-direction

animations-directionはアニメーションを交互に反転再生させるかどうかを指定します反転させることによって違和感のないアニメ―ションを実現します