transform、transition、animation

transform是变换，静态的，没有动画，展示效果是变换后的，包括位移（相对中心点进行位移）、缩放（0-无数）、扭曲（或倾斜，deg）、旋转（单位是deg）、矩阵转换（matrix）。默认中心点是中心，可以通过transform-origin变换中心点。
transform 文档：click

需要进行区分的是transition和animation，它们两个都是实现动画。

区别	transition	animation
开始条件	需要触发，即focus、hover、被点击等	delay结束之后自行开始
设定状态数	两个：开始和结束	百分数中自行设置
值	transition-property(变幻的属性none、all、indent【某一个属性值】)；transiton-duration（变换持续时间，默认为0）；transition-timing-function(变换速率变化模式)；transition-delay（变换延迟）	animation-name(@keyframes name{0%{} 100%{}})（动画名称）；animation-duration（动画持续时间）；animation-timing-function(动画变化速率)；animation-delay（动画延迟播放时间）；animation-iteration-count（循环播放次数，infinite是无限次）；animation-direction（动画方向，normal【默认值，向前播放】alternate【正反方向交替 0=>100=>0】）；animation-play-state（动画播放状态,running：播放、paused：暂停）

transition测试链接：click

div{
	width:100px;
	height:100px;
	background:blue;
	
	/* Safari and Chrome */
	-webkit-transition:background 5s ease 0s,width 5s ease 0s;   /*变换多种一定要合起来写，不合起来写任何一个属性的效果也得不到*/
}

div:hover{
	width:500px;
	background:red;
}

animation测试链接：click

div{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	
	/*Safari and Chrome*/
	-webkit-animation:mymove 5s infinite;
	-webkit-animation-delay:2s;
}



@-webkit-keyframes mymove {
	from {left:0px;background:red;}   /*可设置多个值的变化*/
	to {left:200px;background:black;}
}