初窥transition css动画效果

现在的网页上特别多的动画效果，这里做个小小的记录也是自己学到的一些小的动画效果。一个很简单的鼠标移上去DIV缓慢放大的效果

#box{
	width: 80px;
	height: 80px;
	background-color: #007AFF;
	transition:all 1.2s;
	margin: 100px auto;
}
#box:hover{
	 transition:all 1.2s;
	 transform: scale(1.5, 1.5);
}

<body>
	<div id='box'></div>
</body>

会缓慢的变大

转场效果用特别简单的一个css属性来完成（感觉CSS好厉害。），那些看起来特别炫酷高大上的效果其实就是个transition属性，这里详细可以参照W3，一般用的语法就是写出动画属性以及时间
一般我习惯全加上

 -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  transition: all 2.6s;

这是考虑兼容性问题也可以就写transition: all 2.6s;之后就可以再用transform给div或者各类元素写出位置或者效果
这里给大家吧他的所有效果写出来，大家可以去这里参考效果，当然他们也可以组合来用，也可以用hover来实现效果

none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

就先记录到这里吧。这个效果可以组合到一起来进行更多复杂的动画。