一、過渡（transition）
transition-property: 指定具有過渡效果的css樣式屬性名
1.預設值： all
2.僅具有中間值（css樣式值是數值的）的css樣式具有過渡效果
3.可以具體指定那些樣式具有過渡效果，多個css樣式屬性名使用 ， 分割
transition-duration: 設定過渡持續的時間
1. s 或者 ms 必須是正值
2. 預設值 0s
transition-delay: 設定過渡的延遲執行時間
1. 預設值 0s
2. 如果是正值，表示在延遲指定的時間後執行過渡效果
3. 如果是負值，表示立即達到指定之間過渡的結果後再執行過渡。
transition-timing-function: 三次貝塞爾曲線函式
控制過的效果（css值得變換速度）
預設值：
ease: 慢進慢出
linear: 勻速
簡寫：transition: css樣式屬性名 過渡時間 過渡效果 過渡延遲時間 （css樣式屬性名 過渡時間 過渡延遲時間 過渡效果 ）
注意事項：
樣式覆蓋問題
1.如果後面的樣式 持續時間+延遲時間 大於0，後面的樣式覆蓋前面的。
2.如果後面的樣式 持續時間+延遲時間 等於0
chrome 57 以下
-- 前面的樣式生效
chrome 58 以上
-- 後面的樣式覆蓋前面的。
3.如果後面的樣式 持續時間+延遲時間 小於0，前面的樣式生效
二、變形（transform）
變形函式的特點
1、只有非inline元素才能設定變形。
2、內容和後代元素同步變形
3、不會對兄弟元素的位置產生影響。
4、不會造成父元素大小的改變。
1.縮放
scale(x, y)
scalex(length)
scaley(length)
2.傾斜，斜切
skew(x, y)
skewx(angle)
skewy(angle)
3.位移
translate(x, y);
translatex(length);
translatey(length);
4.旋轉
rotate(angle)
變形的中心點
transform-origin: x y
函式綜合使用
-- 第乙個函式的座標系改變（放大，傾斜，旋轉，位移）會影響後續的函式
過渡 變形 動畫
transition all 0.3s linear 0 要過渡的屬性 過渡執行的時間 運動速度 何時開始 注意 組合寫法 旋轉之後，座標會跟著旋轉 移動 transform translate 50 40 x軸位移 50 y軸位移 40 transform translatex 30px x軸移動...
過渡與變形
1.html body 2.加vh 視高 height 100vh vw a視線寬度 weight 100vw translate 平移 位移 不會影響其它元素位置 對行內標籤沒有效果。乙個值 只位移x軸 兩個值 第乙個值位移x軸，第二個值位移y軸 translatey y軸位移 translate...
CSS嵌入方式 變形 過渡（Html基礎）11
css引入方式 變形 移動 transform translate 50px,0px 縮放 transform scale 0.5,0.5 旋轉 transform rotate 45deg 傾斜 transform skew 45deg,30deg 過渡 transition property w...