CSS3学习（二）CSS3动画

一. css3中的动画属性效果：transform,注意浏览器兼容的写法

**2D：**
translate(x偏移量，y偏移量)  //移动
rotate(角度)               //旋转
scale(宽度倍数，高度倍数)    //缩放
skew(绕x角度，绕y角度)      //倾斜 透视
matirx()                 //矩阵
**3D:**
rotateX()
rotateY()

以上变化只是变化，需要加入过度效果才能成为动画：transition，举例：

div{
width:100px;
height:100px;
background-color:gray;
//浏览器兼容（chrome、Safari）
-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
//动画过度效果 和 时间设置
transition:widht2s,height 2s,transform 2s;
//延时两秒执行动画
-webkit-transition-delay:2s;
transition-delay:2s;
}

div:hover{
width:200px;
height:200px;
transform:rotate(360deg);                   //旋转360度
-webkit-transform:rotate(360deg);
}

二. css3动画遵循@keyframes 规则：①规定动画时长 ②规定动画名称

举例：

div{
width:100px;
height:100px;
background-color:red;
position:relative;
animation:anim 5s;    //@keyframes规则
-webkit-animation:anim 5s;
}
@keyframes{
0%{background:red;left:0px;top:0px}
25%{background:blue;left:200px;top:0px}
50%{background:#gray;left:200px;top:200px}
75%{background:yellow;left:0px;top:200px}
100%{background:red;left:0px;top:0px}
}
//浏览器适配
@-webkit-keyframes anim{
0%{background:red;left:0px;top:0px}
25%{background:blue;left:200px;top:0px}
50%{background:#gray;left:200px;top:200px}
75%{background:yellow;left:0px;top:200px}
100%{background:red;left:0px;top:0px}
}

三. 多列效果

在css3中，可以将块级元素内容分为多个列来显示，像报纸 或 常常看到的pdf论文那样，例如：

.div1{
column-count:3;//分三列显示
-webkit-column-count:3;//浏览器适配
-webkit-column-gap:50px;
column-gap:50px;
column-rule:5px outset gray; //画竖线分割几个列
-webkit-column-rule:5px outset gray;
}

效果图示（图片截取自极客学院视频教学，视频很好，强烈推荐）：