過渡模塊：
:hover 除了可以用在a標簽上 也可以用在任何標簽上
transition-property:
告訴系統(tǒng)那個屬性需要執(zhí)行過渡效果
transition-duration:
告訴系統(tǒng)過渡效果持續(xù)的時長
1.過渡效果三要素
必須要有屬性發(fā)生變化
必須告訴系統(tǒng)那個屬性需要執(zhí)行過渡效果
必須告訴系統(tǒng)過渡效果持續(xù)時長
注意點：
當多個過渡屬性需要
過渡模塊其他屬性：
transition-delay:
告訴系統(tǒng)延遲多少秒之后才開始過渡動畫
transition-timing-function:
告訴系統(tǒng)過渡動畫的速度是多少
ease
ease-in
ease-in-out
ease-out
transform: rotate(ndeg);
旋轉(zhuǎn)多少度
默認情況下所有元素都是圍繞Z軸旋轉(zhuǎn)
想圍繞那個軸旋轉(zhuǎn)那么只需要在rotate后面加上大寫的X Y Z即可
transform: translate(n,n);
平移多少
第一個參數(shù)：水平方向
第二參參數(shù)：垂直方向
transform: scale(n,n);
縮放
第一個參數(shù)：水平方向
第二參參數(shù)：垂直方向
如果取值是1代表不變
如果取值大于1代表放大
如果取值小于1代表縮小
如果水平和垂直縮放都一樣，那么就可以簡寫為一個參數(shù)
縮寫：
如果需要進行多個轉(zhuǎn)換趴腋，那么用空格隔開
2D的轉(zhuǎn)換模塊會修改元素的坐標
系铣焊，所以旋轉(zhuǎn)之后再平移就不是水平平移
形變中心點:
默認情況下所有的元素都是以自己的中心點來作為參考來旋轉(zhuǎn)的，我們可以通過形變中心點屬性來修改它的參考點
transform-origin:n n;
第一個參數(shù)：水平方向
第二參參數(shù)：垂直方向
三種取值方式：具體像素 百分比 關(guān)鍵字(top right....)
transform-style:preserve-3d ;
2D轉(zhuǎn)換3D
perspective
透視：進大遠小
透視屬性必須添加到需要呈現(xiàn)近大遠小的效果的元素的父元素上面
掘金 阿里團隊 醉牛前段
filter:Alpha(opacity=50); /* IE8 以及更早的瀏覽器 */透明度
過渡和動畫之間的異同
不同點：
過渡必須人為的觸發(fā)才會執(zhí)行動畫
動畫不需要人為的觸發(fā)
相同點：
過渡和動畫都是給元素添加動畫效果的
過渡和動畫都是系統(tǒng)新增的一些屬性
過渡和動畫都必須滿足三要素
animation-iteration-count: ;
告訴系統(tǒng)動畫執(zhí)行幾次
animation-direction: ;
告訴系統(tǒng)是否需要執(zhí)行往返動畫
normal：默認取值，執(zhí)行完一次后回到啟動繼續(xù)執(zhí)行
alternate：往返動畫陨亡，指定完一次后往回執(zhí)行下一次
animation-timing-function: ;
告訴系統(tǒng)動畫執(zhí)行的速度
animation-delay:time;
告訴系統(tǒng)動畫幾秒后開始
animation-duration: ;
告訴系統(tǒng)動畫持續(xù)的時長
animation-play-state: ;
告訴系統(tǒng)當前動畫是否需要暫停
running運動
paused暫停
animation-name:**;
告訴系統(tǒng)需要執(zhí)行那個動畫
animation-fill-mode: ;
指定動畫等待狀態(tài)和結(jié)束狀態(tài)的樣式
none不做任何改變
both兩者的結(jié)合
forwards讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式
backwards讓元素等待狀態(tài)的時候顯示動畫第一幀的樣式
告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做**的動畫
@-webkit-keyframes **{
from { }
to { }
}
動畫三狀態(tài)：
等待狀態(tài)
執(zhí)行狀態(tài)
結(jié)束狀態(tài)
動畫模塊連寫格式
animation 名稱 時長 速度 延遲時間 執(zhí)行次數(shù) 往返動畫
