transition transform についてのまとめ

transition  ４つのプロパティを含めたショートハンドプロパティ

transiton (property: どこに   duration: 何秒間で   timing-function: どんな感じで   delay: 何秒後のタイミングで)
という感じに書く

transiton-property

セレクタ名　{
    transition-property: 値;    /* 値にはall(初期値)かnoneかプロパティ名 */
}

transition-duration

セレクタ名　{
    transition-duration: 値;    /* 値にはsかms */
}

transition-timing-function

セレクタ名 {
    transition-timing-function:　値;
/* 値にはcubic-bezier() 簡単にease(初期値)　みたいなものもある */
}

cubic-bezierは３次ベジェ曲線というもので変化の度合いを表したものらしい。。。
参考サイト

中学生でもわかるベジェ曲線

xy軸で考えたとき、P0を原点(0,0) P3を(1.0,1.0)に固定して
P0がP1 P2がP3に移動するまでのP0とP2を結んだ直線の上をP0からP3まで通る点を描いた曲線がcubic-bezier()で
cubic-bezier(P1のx軸の位置 , P1のy軸の位置 , P2のx軸の位置 , P2のy軸の位置)で書いてある

transition-delay

セレクタ名 {
    transition-delay: 値;   /* 値にはsかms */
}

transform  関数を値にする

translate()　移動

セレクタ名　{
    transform:translate(X軸方向の移動距離 ,Y軸方向の移動距離);
}

transform:translate3d(X軸方向の移動距離 ,Y軸方向の移動距離,Z軸方向の移動距離);
みたいなものもある

rotate()　回転

セレクタ名　{
    transform:rotate(回転角度);
/* 単位はdegで書いて、degは円周を360分とした角度を表す単位 */
}

transform:rotate3d(数値,数値,数値,回転角度);
で回転軸をX,Y,Z方向で指定

scale()　伸縮

セレクタ名　{
    transform:scale(数値,数値);
}

これも3dにするとxyz軸で変化可能
数字一つでもOK

skew()  傾斜

セレクタ名　{
    transform:skew(X軸の傾斜角度 ,Y軸の傾斜角度);
}

数字一つでもOK
一つの時と二つの時では角度が違う

参考サイト
https://qiita.com/7968/items/812d6a21fc4dd9ae9c75

noteの練習も兼ねていろいろな書き方で書いてみた