转载

Css3帧动画深入探寻，讲点项目中实际会碰到的问题

先加个副标题XD

--如何解决background-size为100%下处理@keyframes

正是在项目中遇到副标题，才引起我更深入的探寻

先略带一下基本的css3动画

css3的动画实现是通过属性animation 与 @keyframes配合实现的

具体可以参见这篇文章，这位女程序媛有着非常详尽与精彩的阐述

https://24ways.org/2012/flashless-animation/

最后实现了一张猫跑动在有视频滚动的画面上

为什么不用gif?

gif动画就是典型的帧动画，gif在各浏览器上也支持的很好。手机上表现也很好。

唯一的缺点就是体积太大，继而导致低端机上吃内存卡顿。

用css3来实现动画，会明显降低图片体积，即用sprite形式

通常，网上文章介绍的动画都是用px做为大小或距离单位

Css3帧动画深入探寻，讲点项目中实际会碰到的问题

css3的动画实现是通过属性animation 与 @keyframes配合实现的

具体可以参见这篇文章，这位女程序员有着非常详尽与精彩的阐述

https://24ways.org/2012/flashless-animation/

最后实现了一张猫跑动在有视频滚动的画面上

通常，网上文章介绍的动画都是用px做为大小或距离单位

@keyframes walk-cycle {       0% {background-position: 0 0; }     100% {background-position: -880px  0;} }

动画实现如：

.anim-div{     background-image: “那个蛋的图地址”     animation: walk-cycle 1s steps(11) infinite;  }

以上就是最简单实现帧动画的代码了..

嗯。。在pc上看起来貌似还行。

实际项目中遇到的问题。

如果是在手机上,

为简单的适应不同屏幕尺寸，我们通常的做法是让美工大人出一张相对比较大的图，比如以iphone5为基准，320px宽度。

让美工提供640宽度的图给我们。我们通过设置background-size: 100%即可等比缩放来适应大部分的屏了，而不必为每个屏幕都设置不同的背景图片。

那么就成了以下的代码

.anim-div{     background-image: “那个蛋的图地址”     background-size: 100%     animation: walk-cycle 1s steps(11) infinite; }

对，就加了一句background-size: 100%

结果就是，蒙逼了。。动画完全不像预想的那样浪了。现在真是浪出新风格了..

搜了半天google才找到有类似的回答，然后解决方法是

@keyframes walk-cycle {    0% {background-position: 0 0; }  100% {background-position: 110%  0;} } .anim-div{  background-image: “那个蛋的图地址”  background-size: 1100%  animation: walk-cycle 1s steps(11) infinite; }

第一步：background-size设置为帧数*100%，即1100%

第二步：让关键帧也变换为百分比, 并且为其补上最后一帧

公式为: (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/

接下来分析一下：

Css3帧动画深入探寻，讲点项目中实际会碰到的问题

@keyframes countdown {   0% { background-position: 0 0; }   100% {background-position: 0 100%; }   }

.flick {  animation: countdown 1s steps(2) infinite;  background: url(1-2.png) 0 0 no-repeat;  }

你以为.flick就可以让动画在1和2之间跳动形成动画

然而并没有，它只是在1和2中间一半处移来移去

让我们试试加上”end”或“start”属性，看看行不行

.flick-end {  animation: countdown 1s steps(1, end) infinite;  }    .flick-start {  animation: countdown 1s steps(1, start) infinite;  }

它们看起来直接跳过了开始或结束那一帧

综合查阅了相关资料，end和start控制的是一个帧循环结束后连接上继续循环的是哪一帧，现象是

如果设置的是end，那么最后一帧就被无视掉了，如果设置的是start，那么第一帧被无视了。W3c有个相应说明的图，反正我是没看明白。

让我们用3帧的图来验证一下

Css3帧动画深入探寻，讲点项目中实际会碰到的问题

.easy-as {  animation: countdown 1s steps(2, end) infinite;  background: url(1-2-3.png) 0 0 no-repeat;  }

果然end效果是1与2之反复跳转,直接无视了3

要让它正常依次显示1，2，3那么需要补上一帧

@keyframes countdownTo3 {   0% { background-position: 0 0; }   100% {background-position: 0 150%; }   }    .easy-working {  animation: countdownTo3 1s steps(3) infinite;  }

设为150%，即补上了50%一格的高度（一帧）

所以当为两帧时

@keyframes countdownTo2 {   0% { background-position: 0 0; }   100% {background-position: 0 200%; }   }    .flick-working {  animation: countdownTo2 1s steps(2) infinite;  }

再用公式算一遍