will-change

這個東西的主要功能在於告知瀏覽器，為了確保你的動畫可以更順暢的行動，可以用這個告知瀏覽器你接下來要做甚麼事情，這樣瀏覽器可以在你動作前先執行來優化你的動畫效果。

舉例will-change: transform;

然後過度使用並不會讓你的動畫更好，反倒是會拖累你的瀏覽器速度，用完記得要給他用回預設auto，而之所以會拖累的原因是因為當你告知之後你的瀏覽器便會去掉出要跑的屬性做預備，若是你遲遲不來便會一直等待，所以除非是很必要的動畫不然一般的auto也夠用了。

transfrom

transfrom屬性，可以讓你的物件旋轉、縮放、傾斜、位移等等，也可以多個一起使用
但要注意有的瀏覽器不接受transfrom某些屬性，所以可能不是你打錯是他本來就無法套用

transform: matrix(寬度縮放, 垂直旋轉拉伸, 水平旋轉拉伸, 高度縮放, 水平位移, 垂直位移);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);這個是不變唷

旋轉
deg=1度，rad=57.3度，turn=360度
transform: rotate(0.5turn);正面旋轉
transform: rotate3d(x, y, z,轉的角度deg);
transform: rotateX(45deg);左右旋轉
transform: rotateY(45deg);上下旋轉
transform: rotateZ(45deg);

位移
transform: translate(10px,50%);水平與垂直位移，%數看物體的寬高
transform: translate3d(12px, 50%, 10px);
transform: translateX(10px);
transform: translateY(10px);
transform: translateZ(10px);

放大/縮小(倍率)
transform: scale(X跟Y軸放大倍率);scale(X軸放大倍率, Y軸放大倍率);
transform: scale3d(X放大倍率, Y放大倍率,Z放大倍率);
scaleX(2);
scaleY(2);
scaleZ(2);簡單來說厚度

旋轉與拉伸
transform: skew(X,Y);
transform: skewX(30deg);
transform: skewY(30deg);

透視，如同從遠距離觀看這東西很小，近距離觀看就很大這樣，但需搭配其他東西一起用例如rotateX
transform: perspective(100px);

組合式
transform:translate(100px,100px)rotateX(20deg)perspective(10px);
transform:translate(100px,100px)rotate(30deg)scale(2);

明天就是說我們的老大哥transition，雖然前面有點划水，但是對這些東西有一定理解，在之後css動畫創作還是可以達到一定的效果，且也比較知道別人在幹麻就是了