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

先加个副标题XD

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

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

 

先略带一下基本的css3动画

---

 

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

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

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

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

 

为什么不用gif?

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

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

 

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

 

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

 

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/(2-1)) + 100) /100

公式为:  ((100/(2-1)) + 100) /100

公式为:  ((100/(2-1)) + 100) /100

重要的话说三遍，所以公式写三遍

 

此例子中即：

(100 / (11-1) +100)  / 100 = 1.1

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/

 

接下来分析一下：

 

@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帧的图来验证一下

.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;

}

再用公式算一遍

background-position-y: (100 / (2-1) +100)  / 100  = 200%

嗯，所以是y轴上是200%    即:   background-position: 0 200%;

 

结束语

---

一开始还真没注意过这些小细节，直到写到才会碰到，碰到再解决。。so，只能说能多写就多写喽

直到财务自由！！！，财务自由！！！，财务自由！！！重要的话说三遍

祝看到这篇文章的小伙伴都能实现

 

=================================================傲娇分割线===============================================

转载注明，博客园

[email protected]

sheldon.wang

github.com/willian12345