transition 過渡
transition:transition-property transition-duration transition-timing-function transition-delay
transition-property:應用過渡屬性的名稱
transition-duration:以秒或毫秒為單位指定過渡動畫所需的時間硬毕。默認值為 0s ，表示不出現(xiàn)過渡動畫
transition-timing-function:ease,linner等過度時間變化曲線勤篮，存在兼容問題
transition-delay:規(guī)定在過渡效果開始作用之前需要等待的時間
Transitions可以為一個元素在不同狀態(tài)之間切換的時候定義不同的過渡效果绿满。比如在不同的偽元素之間切換辛蚊，像是 :hover粤蝎，:active或者通過JavaScript實現(xiàn)的狀態(tài)變化
eg：
css
1
div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}
2
div{height:80px;border:1px solid red;transition:all 1s;background:red;}
div:hover{cursor:pointer;margin-left:50px;background:green;}
transform 變換
旋轉(zhuǎn)，縮放袋马，傾斜或平移元素（只對 block 級元素有效）
rotate()旋轉(zhuǎn)
正角表示順時針旋轉(zhuǎn)初澎，負角表示逆時針旋轉(zhuǎn)
rotateY():沿著y軸旋轉(zhuǎn)(二維平面看起來就像縮放了一樣)
rotateX():沿著x軸旋轉(zhuǎn)(二維平面看起來就像縮放了一樣)
rotateY():沿著z軸旋轉(zhuǎn)
.element {
transform: rotate(25deg);
}//元素沿著自己的中心點順時針旋轉(zhuǎn)25度
scale()縮放
參數(shù)只為一個時，整體縮放
參數(shù)為兩個時x軸和y軸分別縮放——scale(a,b) a:x; b:y
也可以直接scaleX(),scaleY();單獨縮放x和y軸
div{
width:100px;
height:80px;
border:1px solid blue;
margin:0 auto;transform:scale(.5)
}//縮小為原大小的0.5倍
疑問：為何scale變大之后虑凛，不會使下面的元素重新排列(瀏覽器重新渲染谤狡？)，在自己原來的位置上安靜縮放（變換之后可能被遮擋卧檐，也可能遮擋下面的元素）
skew() 拉伸、傾斜焰宣、扭曲
使得在每個方向上扭曲元素上的每個點以一定角度霉囚。這是通過將每個坐標增加一個與指定角度成比例的值和到原點的距離來完成的。離原點越遠匕积，拉伸的值就越大盈罐。
skew(ax)或skew(ax, ay)
skewX():沿橫坐標扭曲元素的角度
skewY():沿縱坐標扭曲元素的角度
div{
width:100px;
height:80px;
border:1px solid blue;
margin:0 auto;
transform:skewY(25deg)
}
有點抽象，可以看 css-tricks里面的事例(https://css-tricks.com/almanac/properties/t/transform/) (需翻墻)
translate()平移
translate(x,y):x為正時闪唆，往右平移盅粪；y為正時，往下平移
translateX():參數(shù)正負同上
translateY():參數(shù)正負同上
div{
width:100px;
height:80px;
border:1px solid blue;
margin:0 auto;
transform:translate(200px,-50px)
}
animation動畫
未完待續(xù)......
