transition代替简单的animation注意事项

一、

　　transition 和 animation  不支持    Internet Explorer 9，以及更早的版本。

二、

　要变化的属性 
transition-property:要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；W3C给出了一个可变换属性的列表： 
CSS属性 改变的对象 
background-color 色彩 （  渐变色在background不是属于background-color，而是属于background-image。对于background-image要有过                                                  渡效果，你得通过background-position的变化来实现。）
background-image 只是渐变 
background-position 百分比，长度 
border-bottom-color 色彩 
border-bottom-width 长度 
border-color 色彩 
border-left-color 色彩 
border-left-width 长度 
border-right-color 色彩 
border-right-width 长度 
border-spacing 长度 
border-top-color 色彩 
border-top-width 长度 
border-width 长度 
bottom 百分比，长度 
color 色彩 
crop 百分比 
font-size 百分比，长度 
font-weight 数字 
grid-* 数量 
height 百分比，长度 
left 百分比，长度 
letter-spacing 长度 
line-height 百分比，长度，数字 
margin-bottom 长度 
margin-left 长度 
margin-right 长度 
margin-top 长度 
max-height 百分比，长度 
max-width 百分比，长度 
min-height 百分比，长度 
min-width 百分比，长度 
opacity 数字 
outline-color 色彩 
outline-offset 整数 
outline-width 长度 
padding-bottom 长度 
padding-left 长度 
padding-right 长度 
padding-top 长度 
right 百分比，长度 
text-indent 百分比，长度 
text-shadow 阴影 
top 百分比，长度 
vertical-align 百分比，长度，关键词 
visibility 可见性 
width 百分比，长度 
word-spacing 百分比，长度 
z-index 正整数 
zoom 数字 
该取值还有个强大的“all”取值，表示上表所有属性； 
除了以上属性外，当然还有css3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等等。

三、

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

四、

transition-timing-function ：cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

五、

改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时  　 间和其时间的速率变换方式。

  a {
    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
    -o-transition: background 0.5s ease-in,color 0.3s ease-out;
    transition: background 0.5s ease-in,color 0.3s ease-out;
  }

六、

　　animation可以不与事件结合，在dom加载完后直接执行，transition不能这样写（transition这样相当于重写）