CSS入门到实践（五）

CSS动画特效

2D转换方法：translate(), rotate(), scale(),skew(),matrix()
3D转换方法：rotateX(),rotateY()

// 2D转换
.div{
	transform:translate(100px,100px); //移动
	-webkit-transform:translate(100px,100px);//safari,chrome
	-ms-transform:translate(100px,100px) //IE
	-moz-transform:translate(100px,100px)  //firefox
	-o-transform:translate(100px,100px); //opera
	transform:rotate(180deg); //旋转180°
	transform:scale(1，2)  //缩放
	transform:skew(50deg,50deg) //倾斜

}
// 3D转换
.div{
  transform:rotateX(120deg); //X轴旋转120°
  transform:rotateY(120deg); //y轴旋转120°
 }

过渡：从一种样式转换成另一种样式
过度属性：

• transition 设置四个过渡属性
• transition-property //过渡名称
• transition-duration //过渡效果花费时间
• transition-timing-function //过渡效果的时间曲线
• transition-delay //过渡效果开始时间

//过渡
div{
  width:100px;
  height:100px;
  background-color:red;
  -webkit-transition:width 2s,height 2s,-webkit-transform 2s;
}
div:hover{
 width:200px;
 height:200px;
 transform:rotate(360deg);
}

// 动画
div{
  width:100px;
  height:100px;
  background-color:red;
  position:relative;
  animation:anim 5s;
}
@keyframes anim{
	0%{background-color:red;left:0px,top:0px}
	25%{background-color:red;left:100px,top:0px}
	50%{background-color:red;left:100px,top:100px}
	75%{background-color:red;left:0px,top:100px}
	100%{background-color:red;left:0px,top:0px}
}
@-webkit-keyframes anim{
 0%{background-color:red;left:0px,top:0px}
 25%{background-color:red;left:100px,top:0px}
 50%{background-color:red;left:100px,top:100px}
 75%{background-color:red;left:0px,top:100px}
 100%{background-color:red;left:0px,top:0px}
}

多列：创建多列来对文本或区域进行布局
多列属性：column-count, column-gap,column-rule

div{
 -webkit-column-count:4;
 -webkit-column-gap:30px;
 -webkit-column-rule:5px outset red;
}