css3动画--过渡属性 transition-property

可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

  transition-property:指定过渡或动态模拟的CSS属性
  transition-duration:指定完成过渡所需的时间
  transition-timing-function:指定过渡函数
  transition-delay:指定开始出现的延迟时间

transition-property对应具有过渡的CSS属性主要有：
  

transition-timing-function包括以下几种函数：
  ease        默认值，速度由快到慢，逐渐变慢
  linear      恒速
  ease-in     渐加效果，加速速度越来越快
  ease-out    渐隐效果，减速速度越来越慢
  ease-in-out 先加速再减速

参加 http://www.w3cplus.com/mobile/mobile-terminal-refactoring-slider-animation.html有很详细的讲解。

把几个transition的声明串在一起，用逗号（“，”）隔开，可以有各自不同的延续时间和其时间的速率变换方式。第一个时间的值为 transition-duration，第二个为transition-delay:transition: background-color,height,border-radius .6s ease-in .1s;
示例：

<div class="wrapper">
  <div>鼠标放到我的身上来</div>
</div>

/*容器高度从200px渐显效果过渡到100px并且成圆角，过渡0.1s后触发，整个过渡时间持续0.6s。*/

<style type="text/css">
.wrapper {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  border: 2px dotted red;
  position:relative;
}
.wrapper div {
  padding: 15px 20px;
  color: #fff;
  background-color: orange;
  position: absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition:background-color,height,-webkit-border-radius .6s ease-in .1s;
  transition: background-color,height,border-radius .6s ease-in .1s;
}
.wrapper div:hover {
  background-color: red;
  height:100px;
  border-radius: 10px;
}</style>

查看效果： http://jsfiddle.net/5oheh90w/
transition动画与animation动画的区别在于：

1、transition动画只能定义开始和结束位置，中间无法定义；而keyframes则可以定义n帧作为中间的过渡帧。

2、对于切入切出动画来说，transition动画我们只需添加删除一个class即可完成，而animation动画则需要切换两个class，再在最后删除class，比较复杂。

3、如果你的动画不需要定制中间帧，那直接使用transition动画即可，切换一个class就可以了，运动结束时候可以js调用transitionend函数，而如果需要定制中间帧，那么还是animation，当然animation的事件有三个animationstart，animationiteration，animationend