CSS3动画基本知识
1.requestAnimationFrame
requestAnimationFrame是实现如“最优帧速率”、“选择绘制下一帧的最佳时机”的功能，它的兼容性写法：
var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };
requestAnimationFrame在JS动画中使用很多，可以配合使用第三方 JavaScript 动画库 如Velocity.js，也可以配合CSS 动画库，如 Animate.css。
2.Transition
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; })
