transition与animation区别（transform/transition/animation属性汇总）

为便于记忆，针对transform、transition、animation属性汇总如下:

 

	transform属性		transition属性		animation属性
	rotate()		transition-property		animation-name
rotate属性	rotate(angle)              angle（可正可负） transform:rotate(45deg)   transform:rotate(-60deg)	transition-property属性	transition-property:  none  | <single-transition-property>[, <single-transition-property>]*                  single-transition-property = all|<IDENT>  能做动画属性的CSS属性详情见下图 transition-property:color,left;	animation-name属性	animation-name:<single-animation-name>[,<single-animation-name>]*      single-animation-name=none|<IDENT>  animation-name:abc;
	translate()		transition-duration		animation-duration
translate属性	translate(<translation-value> [, <translation-value>]?) translateX(<translation-value>) translateY(<translation-value>) transform:translate(50px,20%)  当使用百分比时，参照物为元素的容器	transition-duration属性	transition-duration：<time>[,<time>]*    transition-duration:1s;	animation-duration属性	animation-duration:          <time>[,<time>]*     animation-duration:1s;
	scale()		transition-timing-function		animation-timing-function
scale属性	scale(<number>[,<number>]?) scaleX(<number>) scaleY(<number>) transform:scale(1,1.2)	transition-timing-function属性	transition-timing-function:<single-transition-timing-function>[,<single-transition-timing-function>]*  single-transition-timing-function =ease|ease-in|linear|ease-out|ease-in-out| cubic-bezier(<number>,<number>,<number>)|step-start|step-end|steps(<integer>[,[start|end]]?)        transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)	animation-timing-function属性	animation-timing-function:<single-timing-function>[,<single-timing-function>]*     single-timing-function =<single-transition-timing-function>                animation-timng-function:ease
	skew()		transiton-delay		animation-iteration-count
skew属性	skew(<angle>[,<angle>]?) skewX(<angle>) skewY(<angle>) transform:skew(30deg)	transition-delay属性	transition-delay:<time>[,<time>]*  transition-delay:1s;	animation-iteration-count属性	animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]*     single-animation-iteration-count =infinite|<number>   animation-iteration-count:1;
	transform 属性简写		transition属性简写		animation-direction
	transform:<transform-function>+		transition:               <single-transition>[,      <single-transition>]*       single-transition=[none|  <single-transition-property> ]||<time>||               <single-transition-timing-function>|| <time>     transition:动画属性(transiton-property)、动画时间(transiton-duration)、动画速率(transition-timing-function)、 动画延时时间(transition-delay) 动画	animation-direction属性	animation-direction：<single-animation-direction>[,<single-animation-direction>]* <single-animation-direction>=normal|reverse|alternate| alternate-reverse       animation-direction: alternate;
	transform-oringin				animation-play-state
transform-origin属性	transform-oringin:                [left|center|right|top|bottom|<percentage>|<length>]  |  [left|center|right|<percentage>|<length>]  [top|center|bottom|<percentage>|<length>]<length>? | [center|[left|right]]&&[center[top|bottom]]<length>?                transform-origin:left top 20px			animation-play-state属性	animation-play-state:<single-animation-play-state>[,<single-animation-play-state>]* <single-animation-play-state>=running|paused    animation-play-state:paused;
	perspective				animation-delay
perspective属性	perspective:none|<length>  perspective:2000px;     perspective:none;			animation-delay属性	animation-delay:<time>[,<time>]*  animation-delay:2s;
	perspective-origin				animation-fill-mode
perspective-origin属性	perspective-origin:    [left|center|right|top|bottom|<percentage>|<length>]  |  [left|center|right|<percentage>|<length>]  [top|center|bottom|<percentage>|<length>]  | [center|[left|right]]&&[center[top|bottom]]             perspective-origin:left bottom			animation-fill-mode属性	animation-fill-mode:<single-animation-fill-mode>[,<single-animation-fill-mode>]*     <single-animation-fill-mode>=none|backwards|forwards|both   animation-fill-mode:forwards
	translate3d()				animation属性简写
translate3d属性	translate3d(<translation-value> ,<translation-value>,<length>) translateX(<translation-value>) translateY(<translation-value>)   translateZ(<length>)             transform:translate3d(10px,20%,30px)				animation:<single-animation>[,<single-animation>]* <single-animation>=<single-animation-name>||<time>||<single-animation-timing-function>||<time>||<single-animation-iteration-count>||<single-animation-direction>||<single-animation-fill-mode>||<single-animation-play-state>                 animation:abc 1s both,abcd 2s both;
	scale3d()				@keyframes定义关键帧
scale3d属性	scale3d(<number>,<number>,<number>)                      scaleX(<number>) scaleY(<number>)  scaleZ(<number>) transform:scale3d(1.5,1.5,1)				@keyframes abc{ from{opacity:1;height:100px;} to{opacity:0;height:200px;} }
	rotate3d()
rotate3d属性	rotate3d(<number>,<number>,<number>,<angle>)  rotateX(<angle>) rotateY(<angle>) rotateZ(<angle>) trnasform:rotate3d(1,1,1,30deg)
	transform-style
transform-style属性	transform-style: flat | preserve-3d                                          transform-style:preserve-3d;
	backface-visibility
backface-visibility属性	backface-visibility: visible|hidden                                               backface-visibility:hidden;

 

能做为transition-property属性的CSS属性

transform设置的是元素的CSS静态属性。

个人对transition于animation的区别总结如下：

1、transition只能定义动画开始到动画结束这二帧之间的过度效果，不能对动画过程中任意帧进行设置，而animation可以对动画过程中任意帧进行设置

2、transition必须有一个触发条件，不能在自动播放动画过度效果；animation在页面加载完成后自动播放动画效果

3、transition相当于是animation的简化版