transition, transform, tanslate,animation分别为过渡，变换，平移、动画。transform的属性包括：rotate() / skew() / scale() / translate(,) 。

　　transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
　　为了更好地理解 transform 属性，请查看这个演示。

　　默认值：none

　　继承性：no

　　版本：CSS3

　　JavaScript 语法：object.style.transform="rotate(7deg)"

　　语法
　　transform: none|transform-functions;

　　值 描述

　　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 转换元素定义透视视图。
　　

具体可以参考css.doyoe.com 这个手册有详细介绍

transition 是过渡

请将鼠标移动到下面的矩形上：


	
背景色过渡

	
背景色过渡

	
背景色过渡

	
背景色过渡

	
背景色过渡




			

transfrom 是变换

矩阵变换：matrix()


	
		
transform:matrix(0,1,1,1,10,10)

	

平移：translate(), translateX(), translateY()


	
		
transform:translate(5%,10px)

	
	
		
transform:translate(-10px,-10px)

	
	
		
transform:translateX(20px)

	
	
		
transform:translate(20px)

	
	
		
transform:translateY(10px)

	
	
		
transform:translate(0,10px)

	

旋转：rotate()


	
		
transform:rotate(-15deg)

	
	
		
transform:rotate(15deg)

	

缩放：scale()


	
		
transform:scale(.8)

	
	
		
transform:scale(1.2)

	

扭曲：skew()


	
		
transform:skew(-5deg)

	
	
		
transform:skew(-5deg,-5deg)

	



			

animate 是动画

	CSS3 Animations
	CSS3 Animations
	CSS3 Animations



			

hahazaixian写的很详细，具体自己试一下就知道区别了