我以前始终都把他搞反，或者是混淆。现在可以稍微小结下。
Transition:CSS3中处理动画的一个样式；只涉及动画起始和终止两个状态。如果涉及到一个动画的各个时间或者状态，那就必须要用到的另外一个样式：Animate。
Transition有四个过渡属性：
transition-property /*指定动画执行的样式变化*/
transition-duration /*动画需要执行的时间*/
transition-timing-function /*平滑过渡的函数：*/
transition-delay /*延迟多长时间开始动画*/
transition-property指定样式变化，如果涉及到元素的位移、旋转、形变、缩小/放大就需要用到Transform属性：
transform:scale(sx,sy);
transform:translate(0px,9px);
transform:rotate(a);
transform:skew(ax,ay);
transform:matrix(a,b,c,d,e,f)
其中martix比较复杂，它可以包含旋转、形变、缩小/放大三者，其实transform的原理是计算机图形学中的2D矩阵变换。
参考：http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html，transition-timing-function需要用到贝塞尔曲线，
首先需要知道几个简单常量：linear ease ease-in ease-out ease-in-out。进一步精化就需要知道什么是贝塞尔曲线。可以参考：
http://www.zhangxinxu.com/wordpress/2013/08/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF-cubic-bezier-css3%E5%8A%A8%E7%94%BB-svg-canvas/,来看一个JS操作transition的例子：
<body class="layout-scroll">
<div id="test"style="background-color: red;width:200px;height: 100px;top:10px;left:10px;position:relative">
<a href="#nolink" id="click" style="bottom: -22px; text-align: center; position:absolute">点击</a>
</div> <script type="text/javascript">
var circular = {
style: 'cubic-bezier(0.1, 0.57, 0.1, 1)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)
fn: function (k) {
return Math.sqrt( 1 - ( --k * k ) );
}
};
$('#click').click(function(){
var transformStyle = $('#test')[0].style;
transformStyle["webkitTransitionDuration"] = 0 + 's';
transformStyle["webkitTransitionTimingFunction"] = circular.style;
transformStyle["webkitTransform"] = 'translate(' + 700 + 'px,' + 0 + 'px)'
});
//transitionDuration为0的情况下，不触发TransitionEnd事件
$('#test').on('webkitTransitionEnd',function(){
alert('game over')
},false);
</script>
</body>
来看一个例子，该例子是点击右边的箭头，会撑开下面的文本，箭头会变成向右。撑开的过程采用transition，在transition结束之后，箭头变化！
代码如下：
/*
.mgf-content-list li p {
overflow: hidden; //内容溢出元素框时隐藏。
}
*/
$('ul li h2 .mgf-icon').on('tap',function(){
var transFormDom = $(this).closest('li').find('p')[0];
var transFormStyle = transFormDom.style;
if(transFormStyle.height == '0px') {
transFormStyle.height = $(transFormDom).attr("height")+ 'px';
}else{
transFormStyle.height = 0;
}
transFormStyle.transition = 'height 0.5s linear';
});
//动画结束之后，箭头样式变化。
$('ul li p').on('webkitTransitionEnd',function(){
var Z_dom = $(this).parent('li').find('span');
if(Z_dom.hasClass('mgf-icon-chevron-down')){
Z_dom.removeClass('mgf-icon-chevron-down').addClass('mgf-icon-chevron-right');
}else {
Z_dom.removeClass('mgf-icon-chevron-right').addClass('mgf-icon-chevron-down');
}
});
//页面初始化，先获取p区域的高度。然后把该区域的高度设置为0，
//可以隐藏p区域
$('.mgf-content-list li p').forEach(function(item,index){
$(item).attr("height",$(item).height());
item.style.height = 0;
})