css3新属性总结

box-sizing: border-box;   不用计算padding值

filter：blur(5px);  滤镜效果，是图片模糊    filter: grayscale(100%);  使图片变黑白

width:calc: (100% - 120px);  两边有30px的间隙,搭配 position: absolute;left: 60px; 使用

transition：属性 过度时间 过度方式(默认ease) 开始时间;   css3过渡   例如：transiton：width 1.5s，height 1.5s;  
transform：translate(x,y);  盒子平面移动；不会影响其他盒子；x值越大越向右，y值越大越向下
transform：translate3d(x,y);  盒子立体移动    
trasform：rotate(x deg)   盒子平面旋转；角度为正则顺时针旋转，角度为负则逆时针旋转；默认旋转的中心点是元素中心点
trasform：rotate3d(x deg)    盒子立体旋转
transform-origin：50% 50%； 设置旋转的中心点；属性参数有三种形式：px，百分比，方位名词
transform：scale(x,y)；   盒子平面等比缩放
transform：scale3d(x,y,z);    盒子立体等比缩放

动画

@keyframes move {                                    /*@keyframes xxx定义动画*/
	/*开始状态*/
	0%：{
		transform： translate（0，0）；
	}
	/*结束状态*/
	100%：{
		transform： translate（1000px，0）；
	}
}

div{
	width: 50px；
	height: 50px;
	background: black;
	/*动画名称*/
	animation-name: move;
	/*动画时间*/
	animation-duration: 2s;
}

1.animation-name                             //动画名
2.animation-duration                      //动画时长
3.animation-delay                          //动画何时开始
4.animation-iteration-count            //播放次数，默认为1，参数infinite表示无限播放
5.animation-direction                    //动画周期结束后是否还反方向播放，默认为normal，如果要反方向则需要参数alternate
6.animation-fill-mode                  //动画播放后的状态，是否回到起始位置，默认是backwards,若不返回则需要参数forwards
7.animation-play-state   				 //动画是否暂停，参数为paused，常搭配：hover来使用。
8.运动曲线
ease      //先匀速后减速
linear    //保持匀速
steps（n） //保持步长，按规定的次数完成

简写形式     animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始/结束位置