?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動畫完成時保持動畫結束的狀態