1. Transition-Property:
2. Transition-duration:
3. Transition-timing-function:
4. Transition-delay:

总结CSS3新特性(Transiton篇)

CSS 过渡（transition）, 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。

Transition是一个简写属性,四个值(单独使用均加transition-前缀)的顺序:

　　property

　　duration

　　timing-function

　　delay

过渡就是在一定时间内完成某属性值的改变,所以,transition-duration一定要设置,因为它默认值为0;

Transition-Property:

要过渡的属性值,只有被指定的属性才会在过度时产生动画效果,可以填all,all为所有可动画属性;

#demo {
  width:20px;
  height:20px;
  background-color:#0080FF;
  transition: width 1.5s;
}
#demo:hover {
  width:30px;
  height:30px;
}

可以选择多个属性的值;

#demo {
    width: 20px;
    height: 20px;
    background-color: #0080FF;
    transition-property: width , height;
  /*写多个值用逗号分割*/
    transition-duration: 2s;
  /*过渡持续时间可以只写一个,也可分别指定,同样用逗号分割*/
}

使用简写时指定多个属性:

#demo {
    width: 20px;
    height: 20px;
    background-color: #0080FF;
    transition: width 2s, height 4s;
  /*两条定义之间用逗号分割,后两个值为选填.*/
}

使用子属性时需要注意几点:

#demo {
    transition-property: width , height , top;
    transition-duration: 2s , 3s;
  /*定义时间个数少于属性个数,会再次循环数组*/
}
/*相当于*/
#demo {
    transition-property: width , height , top;
    transition-duration: 2s , 3s , 2s;
}

#demo {
    transition-property: width , height;
    transition-duration: 2s , 3s , 2s;
  /*定义时间个数多于属性个数,多出的值会被截取*/
}
/*相当于*/
#demo {
    transition-property: width , height;
    transition-duration: 2s , 3s;
}