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; 動畫延遲
number 具體次數
infinite 無限的
animation-direction: alternate-reverse; 動畫的方向
normal 正常
reverse 反向
alternate 交替執行
alternate-reverse 先反向，再交替執行
animation: move 10s ease 2s infinite alternate;
ease 平滑過渡
infinite 無限的
alternate 交替執行
定義乙個動畫
@keyframes move
to
}
CSS3轉換過渡動畫
css3中有三個屬性 transform transition animation，一直容易搞混，今天特意拎出來理一理。transform 能夠對元素進行移動 縮放 轉動 拉長或拉伸。transform 分為2d轉換和3d轉換，由於目前瀏覽器對3d轉換的支援度還不好，所以以下主要講解2d轉換。rot...
CSS3轉換 過渡 動畫
transition過渡 animation動畫 順時針旋轉某deg度 負值逆時針 div 根據 x軸 和 y軸 位置給定的引數，從當前元素位置移動。細分 translatex x ranslatey y div div2 元素寬度增加或減少a倍的大小，元素高度增加或減少b倍的大小 細分 scale...
CSS3轉換和動畫
2d轉換 transform屬性 屬性值有 translate 平移，單位px rotate 旋轉，單位deg scale 縮放，給定倍數 skew 翻轉，根據x軸，y軸，單位deg matrix 函式式，自定義 3d轉換 transfrom屬性 屬性值rotatex 單位deg rotatey 單...