1.多列布局
類似報刊雜志的排版方式，一般常用于控制大篇幅文本
column-count: 4; /*設置內容分為幾列*/
column-width: 400px; /*列寬，當列寬乘以列數的乘積大于盒子的總寬度的時候，那么，就會自動調整列數*/
column-gap: 60px; /*調整列與列之間的寬度*/
column-rule: 2px dashed #ccc; /*設置列與列之間的線條*/
2.過渡
例如，一個盒子直接從200PX變成400PX，是不是直接變大？
后來，我們學了animate，是不是緩慢變大，這就是過渡
那么，就是說，只要當前元素有屬性發生變化的時候，可以平滑的過渡過去，而不是突兀的直接改變，就是過渡；
切記，設置過渡屬性的時候，一定要設置初始值以及目標值；
image.png
過渡效果，寫在元素本體，不要寫在hover里面
3.動畫
之前，我們寫動畫，都是通過JS來實現，但是，CSS3也可以實現動畫效果，動畫相比過渡，可以控制更多的細節，可以將一個動畫拆分成多個步驟；
想要生成動畫，第一步，就要創建動畫序列：
@keyframes name{
from{
動畫起點
}
to{
動畫終點
}
}
動畫序列，除了可以用from起點和to終點以外，還有可以通過百分比來設置
@keyframes name{
0%{
動畫起點
}
100%{
動畫終點
}
}
調用動畫：animation：name 時間；
animation-name: an; /*動畫名稱*/
animation-duration: 3s; /*動畫時間*/
animation-fill-mode: forwards; /*動畫結束后的狀態*/
animation-iteration-count: infinite; /*無限循環*/
/*animation-delay: 2s;*/
/*動畫延遲，并且只在動畫前生效一次*/
animation-timing-function: ease; /*動畫速度*/
4.轉換
轉換時CSS3中具有顛覆性的特征之一，可以實現元素的位移、選裝、變形、縮放，
配合前面學過的動畫，可以實現極多的動畫效果；
2D轉換
Translate(x,y)，相對于自身的移動，并未脫離文檔流
image.png
