css3 animation实现逐帧动画
css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习
animation属性一览
因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了
使用animation实现逐帧动画
熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己
思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
div{
width:140px;
height:140px;
background: url(run.png) ;
animation-name：run;
animation-duration:1s;
animation-iteration-count:infinite;
}
但是跑起来后我们发现，每帧动画之间帧动画都是滑动，并不是我们要的效果,为什么呢？
原来animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
知道原因就好办了，解决思路就是：
@keyframes run{
0%, 8%{ /*动作一*/ }
9.2%, 17.2%{ /*动作二*/ }
...
}
step1：动作之间停留8帧，0%设置动作一，动作一结束在8%
step2：动作之间过渡1.2帧，9.2%设置动作二，动作二结束在17.2%
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
@-webkit-keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s infinite;
-webkit-animation:run 1s infinite;
animation-fill-mode : backwards;
-webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
还有另外一个实现方法，就是利用steps(),就是帧之间的阶跃动画，这个在w3c里面没有写，先贴个图
由上图可知:
steps(1,start):动画一开始就跳到 100% 直到这一帧（不是整个周期）结束
steps(1,end):保持 0% 的样式直到这一帧（不是整个周期）结束
另外也可以直接设置
animation-timing-function:step-start/step-end
step-start效果等同于steps(1,start)，step-end效果等同于steps(1,end)
最终效果，因为录制的问题可能有点卡顿，有兴趣的同学可以直接复制代码去跑下：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
css3 animation实现逐帧动画的更多相关文章
- Android动画效果之Frame Animation（逐帧动画）
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
- css3系列之animation实现逐帧动画
上面这个两个简单的动画,是用 animation-timing-function: steps(); 这个属性实现的,具体如何实现,看下面: 这上面的图片,也就是我们的素材, 有些人,可能不是很理解 ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...
- Android笔记(六十三) android中的动画——逐帧动画（ frame-by-frame animation）
就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...
- 利用css3-animation来制作逐帧动画
前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...
- 使用node.js开发一个生成逐帧动画小工具
在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...
随机推荐
- 利用HTML5 Geolocation API在百度地图中显示你的位置
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...
- 知方可补不足~SQL数据库用户的克隆，SQL集群的用户同步问题
我们知道在为sqlserver建立功能数据库时,通过会为库再建立一个登陆名,而这个登陆名时,只用来管理这个数据库,这是安全的,正确的.
- 使用教程sqlite
访问地址: http://www.runoob.com/sqlite/sqlite-where-clause.html
- JAVA js的escape函数、解析用js encodeURI编码的字符串、utf8转gb2312的函数
在使用webView时,如果url中参数有中文的话,拦截到的字符串就会类似这样的:http://api.letstar.cn/zq/news.html?id=20&cupName=%E6%B5 ...
- JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片
最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把: index.html 页面展示代码 <!DOCTYPE html PUBLIC " ...
- 给postfix设置黑名单
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 找回丢失的SQL Server性能计数器
There was one time when I was delivering a Service using a tool that gathers performance data throug ...
- BZOJ 1090: [SCOI2003]字符串折叠 区间DP
1090: [SCOI2003]字符串折叠 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...
- SQL Server 性能优化3 该指数（Index）保养
前言 之前的一篇文章介绍了索引来提高数据库的查询性能,这其实仅仅是个开始.也许假设缺乏适当的保养,索引你以前建立的,甚至成为拖累,成为帮凶下降数据库的性能. 寻找碎片 消除碎片索引维护可能是最常规的任 ...
- php中用户自定义排序
php中数组用户自定义排序函数有usort和uasort,前者键值重新排列,后者保持原数组的键值. 举例usrot: usort($filterArr, 'sortArr'); function so ...