?transition:設置過渡

屬性值:過渡的屬性列如? width? 一般設置為all? ?過渡時間:$s

transfrom:2D變換

transform-origin: center ;

設置變換基準點 可以是單詞? px(相對于左上角) 百分比(相對于變換前的自身)

1平移

translate(x,y):一個值默認在x方向,兩個值分別代表x方向和y方向

單位px 或百分比(相對于自身寬高)

transform: translate(200px,300px);

?2,縮放

scale(x,y):一個值默認在x方向,兩個值分別代表x方向和y方向

單位px 或百分比(相對于自身寬高)

0-1是縮小

大于1是放大

負數,先翻轉后縮放

transform: scale(-50,0.1);

3,旋轉

rotate:圍繞變換基準點轉

單位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:(動畫名? 時間? 次數(infinite正無窮次)? ?動畫方向? 變化速度)

動畫方向:

normal正方向

reverse:反方向

alternate:奇數次正方向偶數次反方向

alternate-reverse:奇數次反方向偶數次正方向

設置動畫完成時的狀態

?backwards動畫完成時保持動畫剛開始的狀態

?forwards動畫完成時保持動畫結束的狀態