web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例
阿新 • • 發佈：2018-11-30
key cti 樣式 描述 ans 轉換方法 動畫效果 ansi order
CSS動畫--頁面特效部分內容目前僅僅觀看了解內容,記錄簡單筆記，之後工作了進行內容的補充
7. CSS動畫--頁面特效
7.1 2D、3D轉換
7.1.1 通過CSS3轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸
轉換是使元素改變形狀、尺寸和位置的一種效果
可以使用2D、3D來轉換元素
7.1.2 2D轉換方法
translate()
rotate()
scale()
skew()
matrix()
7.1.3 3D轉換方法：
rotateX()
rotateY()
7.2 過渡
1、通過使用CSS3，可以給元素添加一些效果
2、CSS3過渡是元素從一種樣式轉換成另一種樣式
動畫效果的CSS
動畫執行的時間
3、屬性
| 屬性 | 描述 |
| transition | 設置四個過渡屬性 |
| transition-property | 過渡的名稱 |
| transition-duration | 過渡效果花費的時間 |
| transition-timing-function | 過渡效果的時間曲線 |
| transition-delay | 過渡效果開始時間 |
7.3 動畫
1、通過CSS額，也可以進行創建動畫了
2、CSS3的動畫需要遵循@keyframes規則
規定動畫的時長
規定動畫的名稱
7.4 多列
1、在CSS3中，可以創建多列來對文本或者區域進行布局
2、屬性：
column-count
column-gap
column-rule
7.5 瀑布流效果
web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例