trans系のプロパティについて

よくtransform、translate、transitionのtrans系（勝手に命名）がどれがどれだかわからなくなるのでまとめました。
英語の意味全然違うやんとかのツッコミはなしでお願いします。

先に結論

transform（変形）…対象を変形させるプロパティ。
traslate（移動）…transformで使うtransform関数の一つ。対象を移動させる。
transition（遷移）…CSSアニメーションを指定する時に使う。

transform（変形）プロパティ

transformプロパティは要素の変形を行うもの。
2D、３Dどちらにもできる。

使用可能OS

IE9にはベンダープレフックス(-ms-)をつけましょう。
IE8以前には未対応。
Opera Miniでは使えません。
他はだいたいおっけー。

値

要素に関するtransform関数を渡す。
transform関数

効果	説明	transform関数
移動	位置を移動させる	traslate()、traslateX()、traslateY()、traslateZ()、traslate3d()で指定。
縮尺	サイズを変更する	scale()、scaleX()、scaleY()、scaleZ()、scale3d()で指定。
回転	回転させる	rotate()、rotateX()、rotateY()、rotateZ()、rotate3d()、で指定。
傾斜	ゆがませる	skew()、skewX()、skewY()で指定。

その他transform関連プロパティ

transform-originプロパティ
変形時の原点を指定する。
transform-styleプロパティ
変形させた要素を平に描写するか、３Dに描写するかを決めるもの。
以下のサイトの画像が大変わかりやすいです。
https://web-designer.cman.jp/css_ref/abc_list/transform-style/

transition(遷移)プロパティ

cssアニメーションさせるときに使う。
イベントでaddClassされるクラスや、擬似要素などの後からつくプロパティに関して、変化の種類や長さ、タイミングを設定する。

使用可能OS

IE9以前には未対応。
やっぱりOpera Miniでは使えません。
他はだいたいおっけー。

値

transitionにまとめて、書くか、それぞれバラバラのプロパティに書くか選べる。

プロパティ名	説明
transition	アニメーションに関する情報をまとめて記載
transition-property	アニメーションの名前
transition-duration	アニメーションの所有時間
transition-timing-function	イージング指定
transition-delay	アニメーションスタートまでの時間

transitionサンプル

もともとあるセレクタにtransitionを指定してあげて、後からつけるクラスや擬似要素に変更するプロパティを指定してあげます。

div {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

div:hover {
  font-size: 36px;
}

もしくはすべてtransitionプロパティに書く場合

div {
    transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;
}