先加个副标题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,只能说能多写就多写喽

直到财务自由!!!,财务自由!!!,财务自由!!!重要的话说三遍

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

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

转载注明,博客园

willian12345@126.com

sheldon.wang

github.com/willian12345

Css3帧动画深入探寻,讲点项目中实际会碰到的问题的更多相关文章

  1. CSS3帧动画

    在前面的文章中也有介绍过css3动画的内容,可见<关于transition和animation>和<webkitAnimationEnd动画事件>,今天又要唠叨一下这个东西了, ...

  2. 3d图片切换(css3帧动画)

    效果带抖动翻转隐藏,使用帧动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  3. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  4. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  5. 深入理解CSS3 Animation 帧动画(转)

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  6. css3的帧动画

    概述 前几天刚好看到一个用了CSS3帧动画的页面,对它非常感兴趣,就研究了一下,记录在下面,供以后开发时参考,相信对其他人也有用. PS:以后别人问我用过什么CSS3属性的时候,我也可以不用说常见的a ...

  7. uwp 图片切换动画 使用帧动画

    上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...

  8. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  9. javascript帧动画

    前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...

随机推荐

  1. angular 调用element的 onfocus onkeydown onblur等事件

    项目里要实现一个input验证通过就切换到下一个input的功能 当然用jq dom操作很简单  ,大家都懂,现在用 angular,mvc 数据模型控制分离,不想再dom操作怎么办 以下方法 < ...

  2. 使用userData兼容IE6-10,chrome,FF 及360等浏览器的本地存储

    开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了.废话不说了,看代码: (function(window){var LS;(funct ...

  3. 牛客OI赛制测试赛3 解题报告

    前话: 话说考试描述:普及难度. 于是想在这场比赛上涨点信心. 考出来的结果:Point:480     Rank:40 然而同机房的最好成绩是 510. 没考好啊!有点炸心态,D题一些细节没有注意, ...

  4. view的阴影效果shadowColor

    btn.layer.shadowColor = UIColor.blackColor().CGColor btn.layer.shadowOffset = CGSizeMake(5, 5) btn.l ...

  5. png?wxfrom=5&wx_lazy=1

    作为一名游戏行业的视频&平面设计师,平时的工作就是为公司发行的游戏制作宣传视频.广告.平面宣传图,打交道最多的自然就是Adobe家族的设计软件,Photoshop.AfterEffects.P ...

  6. XML外部实体(XXE)注入详解

    ###XML与xxe注入基础知识 1.XMl定义 XML由3个部分构成,它们分别是:文档类型定义(Document Type Definition,DTD),即XML的布局语言:可扩展的样式语言(Ex ...

  7. Python 使用CPickle和pickle模块进行序列化和反序列化

    #Cpickle使用C语言进行编写的相比pickle来说效率高很多 #-*-coding:utf-8-*-'''序列化操作'''try:    import cPickle as pickleexce ...

  8. spring管理hibernate,mybatis,一级缓存失效原因

    mybatis缓存:一级缓存和二级缓存 hibernate缓存:一级缓存和二级缓存 关于缓存: 缓存是介于物理数据源与应用程序之间,是对数据库中的数据复制一份临时放在内存中的容器, 其作用是为了减少应 ...

  9. Android Layout: TableLayout

    TableLayout<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" andr ...

  10. 解题:USACO07FEB The Cow Lexicon

    题面 第一次做Trie上dp,感谢 @i207M 的资瓷 对子串们建立一棵Trie,设$dp[i][j]$表示到母串第$i$位为止在$Trie$上的$j$号节点时的最小修改数量,然后就可以枚举母串各位 ...