Day04（css3动画，demo loding 自由球落体）

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