最近接到一个H5动画的任务，大概状况是这样：
整体动画长度超过10s，这是一个难点，也是唯一的难点。
关于动画的动作拆解和场景分离，先不在这里说，主要说下写大量animation的感受和问题。
总结出的问题：
问题1:为浏览器兼容产生了大量的重复代码；
问题2:连贯动画的执行方案；
问题3:如何保存动画执行后的状态。
关于系统限制的几个问题
animation所执行的动画执行后会回到原来的状态；
循环状态的animation在大多数浏览器在重播的时候会有时间差；
变化频率较高的动画会收到机能的限制，出现卡顿；
setTimeout方法的延时在触摸手机的时候会暂停。
想到的一些解决方案：
1、既要写animation又要写-webkit-animation（@keyframe也是如此），只是想想就知道一个几秒的动画脚本要写多少重复代码了。
我的解决方案是把动画脚本和普通样式分离，然后先只写webkit的脚本（方便调试），然后再起一个文件单独写通用样式，这样维护一个动画脚本就好了，不用每次修改效果都要改两个地方。（上述操作也可以自行写构建脚本自动化完成，less、sass看情况使用～）
2、经过测试，animation里的infinite属性在replay的时候，并不是无缝的，而是有时差的，而且各浏览器状况不一样，所以想用此属性跟其他元素做组合效果要有准备。
3、因为动画每次执行后都会回到最初的状态，所以我们需要一个方法保存执行后的状态，我的方法是用setTimeout同步动画的时间，在合适的时候加一个心得class来保存元素的当前状态以便在下一个场景中进行新的动画。但是在手机端，手指触摸屏幕会让js暂停运行（wp不会），虽然animation也会暂停，但仍会产生不可以预知的错误，具体解决方案还在研究中。
总结：
显然，只要方法得当，animation是完全可以胜任长时间动画的，这让我们摆脱了没有flash，动画实现门槛高的窘境，相反从某些角度，css3写一些动画灵活性更强。