CSS3帧动画深入探寻，讲点项目中实际会碰到的问
CSS3帧动画深入探寻，讲点项目中实际会碰到的问
注：小编是一个有轻微处女座情节的人，所以很多内容为了方便阅读和格式美观，我都做成了图片，上传后头条都压缩了图片质量，但是不影响大家阅读，因为可以点击放大，哇哈哈！
最近比较忙，希望大家多多理解，还有就是马上中秋十一了，小编要会内蒙古大草原了。可能没有办法及时的更新，希望大家多多理解。不过小编会在闲的时候更新一些搞笑的图片以及福利图，喜欢的大家可以留意一下，再次感谢大家的阅读以及鼓励，您的阅读是我最大的动力。
正文开始：
--如何解决background-size为100%下处理@keyframes
正是在项目中遇到副标题，才引起我更深入的探寻
先略带一下基本的css3动画
css3的动画实现是通过属性animation 与 @keyframes配合实现的
具体可以参见这篇文章，这位女程序媛有着非常详尽与精彩的阐述
https://24ways.org/2012/flashless-animation/
最后实现了一张猫跑动在有视频滚动的画面上
为什么不用gif?
gif动画就是典型的帧动画，gif在各浏览器上也支持的很好。手机上表现也很好。
唯一的缺点就是体积太大，继而导致低端机上吃内存卡顿。
用css3来实现动画，会明显降低图片体积，即用sprite形式
通常，网上文章介绍的动画都是用px做为大小或距离单位
动画实现如：
以上就是最简单实现帧动画的代码了..
嗯。。在pc上看起来貌似还行。
实际项目中遇到的问题。
如果是在手机上,
为简单的适应不同屏幕尺寸，我们通常的做法是让美工大人出一张相对比较大的图，比如以iphone5为基准，320px宽度。
让美工提供640宽度的图给我们。我们通过设置background-size: 100%即可等比缩放来适应大部分的屏了，而不必为每个屏幕都设置不同的背景图片。
那么就成了以下的代码
对，就加了一句background-size: 100%
结果就是，蒙逼了。。动画完全不像预想的那样浪了。现在真是浪出新风格了..
搜了半天google才找到有类似的回答，然后解决方法是
第一步：background-size设置为帧数*100%，即1100%
第二步：让关键帧也变换为百分比, 并且为其补上最后一帧
公式为: (100 / (帧数-1))%+100%
公式为: (100 / (帧数-1))%+100%
公式为: (100 / (帧数-1))%+100%
重要的话说三遍，所以公式写三遍
此例子中即：
(100 / (11-1) ) % + 100% = 110%
background-position: 110% 0;
为什么要补上一帧？
带出了另一个话题
在做 biu动图社区 HTML5展示页时， 偶然发现keyframe实现的动图循环过程中会丢失一帧 ，找了好久终于有一篇国外同行研究此现象的文章，
当使用css3的steps配合以百分比为值的background-position时，循环帧的过程中最后一帧是不显示的
以下是我找到的国外网友分析的资料及实例测试，实例中查看源码即可看到以下的分析逻辑
写的测试地址：
http://willian12345.github.io/test-demo/step-keyframes/
或
http://sheldonwang.com/test-demo/step-keyframes/
接下来分析一下：
你以为.flick就可以让动画在1和2之间跳动形成动画
然而并没有，它只是在1和2中间一半处移来移去
让我们试试加上”end”或“start”属性，看看行不行
它们看起来直接跳过了开始或结束那一帧
综合查阅了相关资料，end和start控制的是一个帧循环结束后连接上继续循环的是哪一帧，现象是
如果设置的是end，那么最后一帧就被无视掉了，如果设置的是start，那么第一帧被无视了。W3c有个相应说明的图，反正我是没看明白。
让我们用3帧的图来验证一下
果然end效果是1与2之反复跳转,直接无视了3
要让它正常依次显示1，2，3那么需要补上一帧
设为150%，即补上了50%一格的高度（一帧）
所以当为两帧时
再用公式算一遍
background-position-y: (100 / (2-1))% + 100% = 200%
嗯，所以是y轴上是200% 即: background-position: 0 200%;
结束语
一开始还真没注意过这些小细节，直到写到才会碰到，碰到再解决。。so，只能说能多写就多写喽.
祝看到这篇文章的小伙伴都能完美实现。