1.動畫介紹
動畫的原理：視覺暫留作用、畫面逐漸變化
動畫的作用：愉悅感、引起注意、操作的反饋、掩飾載入過程
css中動畫型別：
1.transition補間動畫（有開始有結尾，中間補出來）
2.keyframe關鍵幀動畫（也是補間動畫，但是可以有多個關鍵幀，也就是中間多了些幀）
3.逐幀動畫
區分幾個概念：
animation（動畫） ~關鍵幀，往復性。
transition（過渡）~ 屬性，觸發動作，一過性。
transform（變換）~ 複雜的變換引數。
translate（移動）~translate只是transform的乙個屬性值，即移動。
參考文章：
可以使用animate.css中css動畫效果庫。
還可以參考一篇文章：
2.transition動畫
補間動畫中間過程：
位置-平移（left/right/margin/transform）
方位-旋轉（transform）
大小-縮放（transform）
透明度（opacity）
其他-線性變換（transform）
.container
.container:hover
//將滑鼠懸停在乙個div元素上，逐步改變**的寬度從100px到300px：
divdiv:hover
transition: property duration timing-function delay;duration:transition效果需要指定多少秒或毫秒才能完成
timing-function:指定transition效果的轉速曲線
delay:定義transition效果開始的時候
關於timing-function屬性有：linear、ease、ease-in、ease-in-out、cubic-bezier(n,n,n,n)
cubic-bezier也是規定速度曲線一種。
更多timing-function效果可以看（還可以自定製效果）：
動畫除錯方法：
f12除錯面板之後，按esc鍵進入animation面板進行除錯。
3.keyframe動畫
關鍵幀動畫相當於多個補間動畫
與元素狀態的變化無關
定義更加靈活
.container
@keyframes run
50%100%
}
適用於無法補間計算的動畫。
使用steps()這個值實現。
逐幀動畫適用於動畫時長比較短、不是很大的場景。
原圖是這樣（400x200），通過雪碧圖原理+逐幀動畫，讓他動起來。
steps(n,start/end) 第乙個引數 number 為指定的間隔數，即把動畫/關鍵幀之間分為 n 步階段性展示，第二個引數預設為 end，設定最後一步的狀態，start 為結束時的狀態，end 為開始時的狀態。
steps(1)效果拿下面舉例，0%到12.5%時候是不動的，也就是steps(1)中1讓他1步執行，保持在background-position: 0 0;位置，以下類似。
.container
@keyframes run
12.5%
25%37.5%
50%62.5%
75%87.5%
100%
}
1.transition補間動畫/過渡動畫（有開始有結尾，中間補出來）
2.keyframe關鍵幀動畫（也是補間動畫，但是可以有多個關鍵幀，也就是中間多了些幀）
3.逐幀動畫
2.過渡動畫和關鍵幀動畫的區別
過渡動畫需要有狀態變化
關鍵幀動畫不需要狀態變化
關鍵幀動畫能控制更精細
3.如何實現逐幀動畫
使用關鍵幀動畫
去掉補間（steps）
4.相對js動畫，css動畫的效能
效能不壞
部分情況下優於js
但js可以做到更好
部分高危屬性，如box-shadow等
CSS定位（慕課網學習筆記）
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去，行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...
CSS定位（慕課網學習筆記）
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去，行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...
慕課網的HTML和CSS學習。 一
1 如果top right bottom left的值相同，如下面 margin 10px 10px 10px 10px 可縮寫為 margin 10px 2 如果top和bottom值相同 left和 right的值相同，如下面 margin 10px 20px 10px 20px 可縮寫為 ma...