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
