首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 animation实现逐帧动画效果

Posted in HTML / CSS onJune 02, 2016

css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习

animation属性一览

因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了

CSS3 animation实现逐帧动画效果

使用animation实现逐帧动画

熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己
思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：

CSS Code复制内容到剪贴板
  1. @keyframes run{   
  2.     from{   
  3.         background-position: 0 0;   
  4.     }   
  5.     to{   
  6.         background-position: -1540px 0 ;   
  7.     }   
  8. }   
  9. div{   
  10.     width:140px;   
  11.     height:140px;   
  12.     background: url(run.png) ;   
  13.     animation-name：run;   
  14.     animation-duration:1s;   
  15.     animation-iteration-count:infinite;   
  16. }   
  17.   

CSS3 animation实现逐帧动画效果

但是跑起来后我们发现，每帧动画之间帧动画都是滑动，并不是我们要的效果,为什么呢？
原来animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
知道原因就好办了，解决思路就是：

CSS Code复制内容到剪贴板
  1. @keyframes run{   
  2.     0%, 8%{  /*动作一*/  }   
  3.     9.2%, 17.2%{  /*动作二*/  }   
  4.     ...   
  5. }   
  6.   

step1：动作之间停留8帧，0%设置动作一，动作一结束在8%
step2：动作之间过渡1.2帧，9.2%设置动作二，动作二结束在17.2%

完整代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>css3逐帧动画</title>  
  6.     <style>  
  7.     @keyframes run{   
  8.     0%, 8%{  background-position: 0 0;  }   
  9.     9.2%, 17.2%{  background-position: -140px 0;  }   
  10.     18.4%, 26.4%{  background-position: -280px 0 ;  }   
  11.     27.6%, 35.6%{  background-position: -420px 0 ;  }   
  12.     36.8%, 44.8%{  background-position: -560px 0 ;  }   
  13.     46%, 54%{  background-position: -700px 0 ;  }   
  14.     55.2%, 63.2%{  background-position: -840px 0 ;  }   
  15.     64.4%, 72.4%{  background-position: -980px 0 ;  }   
  16.     73.6%, 81.6%{  background-position: -1120px 0 ;  }   
  17.     82.8%, 90.8%{  background-position: -1400px 0 ;  }   
  18.     92%, 100%{  background-position: -1540px 0 ;  }   
  19.     }   
  20.     @-webkit-keyframes run{   
  21.     0%, 8%{  background-position: 0 0;  }   
  22.     9.2%, 17.2%{  background-position: -140px 0;  }   
  23.     18.4%, 26.4%{  background-position: -280px 0 ;  }   
  24.     27.6%, 35.6%{  background-position: -420px 0 ;  }   
  25.     36.8%, 44.8%{  background-position: -560px 0 ;  }   
  26.     46%, 54%{  background-position: -700px 0 ;  }   
  27.     55.2%, 63.2%{  background-position: -840px 0 ;  }   
  28.     64.4%, 72.4%{  background-position: -980px 0 ;  }   
  29.     73.6%, 81.6%{  background-position: -1120px 0 ;  }   
  30.     82.8%, 90.8%{  background-position: -1400px 0 ;  }   
  31.     92%, 100%{  background-position: -1540px 0 ;  }   
  32.     }   
  33.     div{   
  34.         width:140px;   
  35.         height:140px;   
  36.         background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;   
  37.         animation:run 1s infinite;   
  38.             -webkit-animation:run 1s infinite;   
  39.         animation-fill-mode : backwards;   
  40.             -webkit-animation-fill-mode : backwards;   
  41.     }   
  42.     </style>  
  43. </head>  
  44. <body>  
  45.     <div></div>  
  46. </body>  
  47. </html>  

还有另外一个实现方法，就是利用steps(),就是帧之间的阶跃动画，这个在w3c里面没有写，先贴个图

CSS3 animation实现逐帧动画效果

由上图可知:

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)

最终效果，因为录制的问题可能有点卡顿，有兴趣的同学可以直接复制代码去跑下：

完整代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2.     <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>css3逐帧动画</title>  
  6.         <style>  
  7.         @keyframes run{   
  8.             0%{   
  9.                 background-position: 0 0;   
  10.             }   
  11.             8.333%{   
  12.                 background-position: -140px 0;   
  13.             }   
  14.             16.666%{   
  15.                 background-position: -280px 0 ;   
  16.             }   
  17.             25.0%{   
  18.                 background-position: -420px 0 ;   
  19.             }   
  20.             33.333%{   
  21.                 background-position: -560px 0 ;   
  22.             }   
  23.             41.666%{   
  24.                 background-position: -700px 0 ;   
  25.             }   
  26.             50.0%{   
  27.                 background-position: -840px 0 ;   
  28.             }   
  29.             58.333%{   
  30.                 background-position: -980px 0 ;   
  31.             }   
  32.             66.666%{   
  33.                 background-position: -1120px 0 ;   
  34.             }   
  35.             75.0%{   
  36.                 background-position: -1260px 0 ;   
  37.             }   
  38.             83.333%{   
  39.                 background-position: -1400px 0 ;   
  40.             }   
  41.             91.666%{   
  42.                 background-position: -1540px 0 ;   
  43.             }   
  44.             100%{   
  45.                 background-position: 0 0 ;   
  46.             }   
  47.         }   
  48.         @-webkit-keyframes run{   
  49.             0%{   
  50.                 background-position: 0 0;   
  51.             }   
  52.             8.333%{   
  53.                 background-position: -140px 0;   
  54.             }   
  55.             16.666%{   
  56.                 background-position: -280px 0 ;   
  57.             }   
  58.             25.0%{   
  59.                 background-position: -420px 0 ;   
  60.             }   
  61.             33.333%{   
  62.                 background-position: -560px 0 ;   
  63.             }   
  64.             41.666%{   
  65.                 background-position: -700px 0 ;   
  66.             }   
  67.             50.0%{   
  68.                 background-position: -840px 0 ;   
  69.             }   
  70.             58.333%{   
  71.                 background-position: -980px 0 ;   
  72.             }   
  73.             66.666%{   
  74.                 background-position: -1120px 0 ;   
  75.             }   
  76.             75.0%{   
  77.                 background-position: -1260px 0 ;   
  78.             }   
  79.             83.333%{   
  80.                 background-position: -1400px 0 ;   
  81.             }   
  82.             91.666%{   
  83.                 background-position: -1540px 0 ;   
  84.             }   
  85.             100%{   
  86.                 background-position: 0 0 ;   
  87.             }   
  88.         }   
  89.         div{   
  90.             width:140px;   
  91.             height:140px;   
  92.             background: url(754767/201606/754767-20160601000042992-1734972084.png) ;   
  93.             animation:run 1s steps(1, start) infinite;   
  94.                 -webkit-animation:run 1s steps(1, start) infinite;   
  95.         }   
  96.         </style>  
  97.     </head>  
  98.     <body>  
  99.         <div></div>  
  100.     </body>  

CSS3 animation实现逐帧动画效果

原文地址：http://www.cnblogs.com/Fengzp/p/5548493.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3 animation实现逐帧动画效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 #HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 #HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 #HTML / CSS
CSS3实现多重边框的方法总结
May 31 #HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 #HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 #HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
百度地图(1) 构造函数(1) gRPC(3) 主从复制(1) variables(1) 继承(1) 封装(1) PyAutoGUI(1) Master(1) transaction(1)
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
php中的登陆login实例代码
2016/06/20 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
深入理解JavaScript系列(6)：S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
JQuery radio（单选按钮）操作方法汇总
2015/04/15 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（二）
2015/12/10 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Python进程间通信之命名管道
2017/08/28 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python清除函数占用的内存方法
2018/06/25 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python tkinter图形界面代码统计工具（更新）
2019/09/18 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Dodax奥地利：音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
小学见习报告
2015/06/23 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
导游词之晋城蟒河
2019/12/12 职场文书