CSS3和HTML5一样是网页设计的大势所趋，本篇文章来自腾讯内部饭卡充值改版项目的CSS3动画经验总结。虽然大家访问不到腾讯内部的饭卡站点，不过可以由此小窥一下有趣的动画示例哟。

　　bboy90：总结都浓缩在这个工具里了，想知道工具的地址或想窥探工具诞生的趣事请往下看 。

　　(请使用chrome、safari或firefox浏览器看效果，效果地址)

　　实现上面”嘀卡萌风骚乱舞”的动画，比较麻烦的是，要凭感觉自己算参数写代码，重复试个千百回，才能达到最终满意的效果。

　　比如这个动画：

　　我曾经，这么干过

　　还这么干过

　　step1, 动作1在0%上，动作停留20帧

　　@keyframes anim-name{

　　0%, 20%{ /* 动作1 */ }

　　...

　　}

　　step2, 动作之间过渡5帧，动作1结束帧在20%，20+5=25, 动作2在25%帧，动作停留20帧

　　@keyframes anim-name{

　　0%, 20%{ /* 动作1 */ }

　　25%, 45%{ /* 动作2 */ }

　　...

　　}

　　……

　　经过一番计算后

　　@keyframes anim-name{

　　0%, 20%{ /* 动作1 */ }

　　25%, 45%{ /* 动作2 */ }

　　50%, 70%{ /* 动作3 */ }

　　75%, 95%{ /* 动作4 */ }

　　100%, 120%{ /* 动作5 */ }

　　}

　　艾玛，帧数超出100%了>_<

　　重新计算了一番，动作数5，动作过渡帧数5%，动作停留帧数16%

　　@-webkit-keyframes anim-name{

　　0%, 16%{ /* 动作1 */ }

　　21%, 37%{ /* 动作2 */ }

　　42%, 58%{ /* 动作3 */ }

　　63%, 79%{ /* 动作4 */ }

　　84%, 100%{ /* 动作5 */ }

　　}

　　感谢人民感谢党，最后一帧加起来刚好100%

　　刷新页面看效果之后……(动作过渡有点快，动作停留有点长)

　　效果不对，重算!

　　效果不对，重算!

　　……

　　就这样被折腾地体无完肤，深刻感悟我们是用生命在做动画，啊…..多么痛的领悟悟悟~~(有共鸣的，请默默的点个赞，谢谢)

　　所以，我们今天来探讨如何更科学的计算帧数?

　　文章主要研究循环动画，各个动作之间的过渡有规律性。

　　比如嘀卡萌跳舞动画

　　走路动画

　　还有跑步动画

　　(该动画的实现，可 查看 白树同学的分享)

　　动作过渡有规律性，从代码层面也可理解为各动作之间的过渡帧数是一样的。

　　如上面白树同学实现的跑步动画，各动作之间的过渡帧约14.3帧，代码为

　　@keyframes anim-name{

　　0% {background-position: 0 0;}

　　14.3% {background-position: -180px 0;}

　　28.6% {background-position: -360px 0;}

　　42.9% {background-position: -540px 0;}

　　57.2% {background-position: -720px 0;}

　　71.5% {background-position: -900px 0;}

　　85.8% {background-position: -1080px 0;}

　　100% {background-position: 0 0;}

　　}

　　好，下面让我们愉快的进入主题吧

　　循环动画按循环方式可以分为：

　　用CSS代码的方式表示，就是：

　　单向循环： animation-iteration-count: infinite; animation-direction: normal;

　　双向循环： animation-iteration-count: infinite; animation-direction: alternate;

　　先看看做一个动画需要哪些条件

　　总帧数：100 (已知参数)

　　CSS3帧动画的帧数设置是从0%~100%，数值可以带小数位，0%可以用from关键词替代，100%可以用to关键词替代

　　动作数：n (已知参数)

　　动画中的几个关键动作

　　动作停留帧数：x (未知参数)

　　在当前动作停留的帧数

　　动作过渡帧数：y (未知参数)

　　上一个动作过渡到下一个动作需要用的帧数

　　我们用示例来说明它们之间的关系。

　　单向循环动画

　　示例要求：实现一个3个动作的单向循环动画

　　为了方便理解，以线段图示法来展示

　　Step1，满帧100%

　　0%　　　　　　　　　　　　　　　　　　　　　　　　　　　100%

　　└─────────────────────────────────────────┘

　　Step2，添加动作节点(总节点数 = 动作数)

　　0%　　　　　　　　　　　　　?%　　　　　　　　　　　　100%

　　过渡y帧　　　　　　　　　　　过渡y帧

　　└────────────────────┴────────────────────┘

　　动作1　　　　　　　　　　　　动作2　　　　　　　　　　　　动作3

　　这个时候，我们很轻易的算出动作2的keyframes帧数是50%

　　实际上，很多时候我们需要让每个动作停顿一会，而不会闪动太快。如”嘀卡萌风骚乱舞”的动画，每个动作都需要定格一会，这个时候我们需要给每个动作分配一些停留帧数。

　　Step3，添加停留帧 (总节点数 = 动作数 * 2)

　　0%　　　　?%　　　　　?%　　　　　?%　　　　 ?%　　　　100%

　　停留x帧　　过渡y帧　　　停留x帧　　过渡y帧　　　停留x帧

　　└───────┴────────┴────────┴───────┴───────┘

　　动作1　　　 　　　　　　动作2　　　　　　　　　　动作3

　　这下就复杂了，不过我们仔细分析，会发现它们之间有一定的规律。

　　3x + 2y = 100

　　动作个数 = 3 停留帧个数 = 3 过渡帧个数 = 2

　　设动作个数为n，则

　　动作个数 = n 停留帧个数 = n 过渡帧个数 = n-1

　　然后，我们可以得出一个公式

　　nx + (n-1)y = 100

　　接下来我们可以有规则性的尝试动画参数了，我们尝试让每个动作停留20帧，通过公式求得动作过渡帧数y也等于20，于是得出我们的帧数代码

　　.demo{animation:anim-name 1s infinite;} /* 单向循环 */

　　@keyframes anim-name{

　　0%, 20%{ /* 动作1 */ }

　　40%, 60%{ /* 动作2 */ }

　　80%, 100%{ /* 动作3 */ }

　　}

　　有了公式，我们就不用瞎尝试啦，可以少死点脑细胞了

　　双向循环动画

　　示例要求：实现一个3个动作的双向循环动画

　　复制上面的动画代码，加个 animation-direction: alternate; 属性不就好了?

　　(哦，不对，按照心理学反推论，如果这么简单，作者有必要另起篇幅吗?肯定有阴谋!)

　　不用猜了，我就是有阴谋!

　　继续线段图示，当我们加入 animation-direction: alternate; 属性之后的效果是

　　问题：首尾动作从第二遍播放开始会重复停留时间!

　　这个并不是我们期望看到的效果，不过解决方法也很简单