?transition:設(shè)置過渡
屬性值:過渡的屬性列如? width? 一般設(shè)置為all? ?過渡時間:$s
transfrom:2D變換
transform-origin: center ;
設(shè)置變換基準(zhǔn)點 可以是單詞? px(相對于左上角) 百分比(相對于變換前的自身)
1平移
translate(x,y):一個值默認(rèn)在x方向,兩個值分別代表x方向和y方向
單位px 或百分比(相對于自身寬高)
transform: translate(200px,300px);
?2,縮放
scale(x,y):一個值默認(rèn)在x方向,兩個值分別代表x方向和y方向
單位px 或百分比(相對于自身寬高)
0-1是縮小
大于1是放大
負(fù)數(shù),先翻轉(zhuǎn)后縮放
transform: scale(-50,0.1);
3,旋轉(zhuǎn)
rotate:圍繞變換基準(zhǔn)點轉(zhuǎn)
單位deg
transform: rotate(36deg);
4,傾斜
skewx:向x軸傾斜;
skewy:向y軸傾斜;
skew(x,y):如果只有一個值,作用與skewx相同,如果兩個代表向x軸和向y軸傾斜;
單位deg
transform-style: preserve-3d;元素3d變換
animation-name: 動畫名
animation: bounce .3s 6 alternate ease-out;
ainimation:(動畫名? 時間? 次數(shù)(infinite正無窮次)? ?動畫方向? 變化速度)
動畫方向:
normal正方向
reverse:反方向
alternate:奇數(shù)次正方向偶數(shù)次反方向
alternate-reverse:奇數(shù)次反方向偶數(shù)次正方向
設(shè)置動畫完成時的狀態(tài)
?backwards動畫完成時保持動畫剛開始的狀態(tài)
?forwards動畫完成時保持動畫結(jié)束的狀態(tài)
