css3-轉換 旋轉 過渡 動畫

 

css3-轉換   旋轉   過渡   動畫

轉換

transform 轉換
translate(x,y) 位移
translateX() 設置水平方向位移
translateY() 設置垂直方向位移

旋轉

 

rotate() 旋轉
transform: rotate(45deg);
scale() 縮放
transform: scale(0.5);
skew() 傾斜
transform: skew(45deg);

transform: scale(1.5) rotate(45deg) skew(45deg);

過渡

 

 

transition 過渡 property屬性
transition-property: width; 過渡改變的屬性
transition-property
none：無
property 屬性
all 全部屬性

transition-duration:2s ;持續的時間，秒爲單位
transition-timing-function:ease;過渡函數
linear 線性過渡
ease 平滑過渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快再到慢
step-start 步長 開始
step-end 步長 結束
steps() 幀 

transition-delay: 2s;過渡延遲時間

transition: width 2s ease 3s;
transition: 過渡屬性 持續時間 過渡函數 延遲時間;

動畫

 

animation-name: move;                        動畫名稱 
animation-duration: 2s;                         動畫持續時間 
animation-timing-function: ease;           動畫函數 
 ease 平滑過渡 
 ease-in 由慢到快 
 ease-out 由快到慢 
 ease-in-out 由慢到快再到慢 
 step-start 步長 開始 
 step-end 步長 結束 
 steps() 幀 
animation-delay: 3s;                              動畫延遲 
animation-iteration-count:infinite;          動畫播放的次數 
number 具體次數
infinite 無限的
animation-direction: alternate-reverse;  動畫的方向 
normal 正常
reverse 反向
alternate 交替執行
alternate-reverse 先反向，再交替執行

animation: move 10s ease 2s infinite alternate;
ease 平滑過渡
infinite 無限的
alternate 交替執行
animation 動畫名稱 持續時間 過渡函數 延遲時間 播放次數 動畫方向

 

定義一個動畫
@keyframes move{
    from{
    }
    to{
    }
}