css3 transition transfrom translate animate 有什么区别？

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

transition 是过渡

html>



transition_CSS参考手册_web前端开发参考手册系列





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


	背景色过渡

	背景色过渡

	背景色过渡

	背景色过渡

	背景色过渡

transfrom 是变换

html>



2D transform_CSS参考手册_web前端开发参考手册系列





矩阵变换：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)