利用css3-animation实现逐帧动画效果


Posted in HTML / CSS onMarch 10, 2016

本文分享了用css3-animation来制作逐帧动画的实现方法,供大家参考,具体内容如下

常见用法:

CSS Code复制内容到剪贴板
  1. :hover{ animation:mymove  4s ease-out 1s backwards;}   
  2. @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }   
  3. 复制代码   
  4. 解释:   
  5. mymove :keyframes的名称;   
  6. 4s:动画的总时间;     
  7. ease-out: 快结束的时候慢下来;   
  8. 1s:停顿1秒后开始动画;   
  9. backwards:动画结束后回到原点   
  10. 默认:播放一次   
  11.   
  12. 或者   
  13. transition:left 4s ease-out    
  14. :hover{left:200px}   
  15.   

兼容主流浏览器:

CSS Code复制内容到剪贴板
  1. .test{   
  2.   -webkit-animation: < 各种属性值 >;   
  3.      -moz-animation: < 各种属性值 >;   
  4.        -o-animation: < 各种属性值 >;   
  5.           animation: < 各种属性值 >;   
  6.     }   

animation-name,规定要绑定的keyframes的名称,随便你取,不过为了日后维护的方便,建议取一个跟动作相关名称相近的名称比较好。比如要我们要绑定一个跑的动作,那么可以命名为run。

time,这里有两个时间,前面一个是规定完成这个动画所需要的时间,全称叫animation-duration,第二个time为动画延迟开始播放的时间,全称叫animation-delay,这两个数值可以用秒’s’也可以用微秒’ms’来写,1000ms=1s,这个不用一一介绍。

animation-timing-function,规定动画的运动曲线,这里有9个值,分别是ease| linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

ease:动画缓慢开始,接着加速,最后减慢,默认值;
linear:动画从头到尾的速度是相同的;
ease-in:以低速开始;
ease-out:以低速结束;
ease-in-out:动画以低速开始和结束;

效果一样 (按步数)steps

CSS Code复制内容到剪贴板
  1. .test1{   
  2.  background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;   
  3.  -webkit-animation:run 350ms steps(1) infinite 0s;}   
  4. @-webkit-keyframes run {       
  5.     0% {   
  6.            background-position:0;   
  7.     }   
  8.     20% {   
  9.        background-position:-90px 0;   
  10.     }   
  11.     40% {   
  12.        background-position:-180px 0;   
  13.     }   
  14.     60% {   
  15.        background-position:-270px 0;   
  16.     }   
  17.     80% {   
  18.        background-position:-360px 0;   
  19.     }   
  20.     100% {   
  21.        background-position:-450px 0;   
  22.     }   
  23.   
  24. }   
  25. .test2{   
  26.  background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;   
  27.  -webkit-animation:run 350ms steps(5) infinite 0s;}   
  28.   
  29. @-webkit-keyframes run {   
  30.     100% {   
  31.        background-position:-450px 0;   
  32.     }   
  33.   
  34. }   
  35.   

animation-iteration-count,动画播放次数,默认值为1,infinite为无限制,假如设置为无限制,那么动画就会不停地播放。

animation-direction,规定动画是否反方向运动。
= normal | reverse | alternate | alternate-reverse
第一个值是正常转动播放,默认值,reverse为反向转动,alternate一开始正常转动,播放完一次之后接着再反向转动,假如设置animation-iteration-count:1则该值无效,alternate-reverse一开始为反向转动,播完一次之后按照回归正常转动,交替转动,设置count为1,则该值无效。
animation-play-state,定义动画是否运行或暂停,这是后来新增的属性,有两个属性值分别是running和paused。默认值为normal,动画正常播放。假如是为paused,那么动画暂停。假如一个动画一开始为运动,那么假如设置paused那么该动画暂停,假如再设置running,那么该动画会从刚才暂停处开始运动
animation-fill-mode,定义动画播放时间之外的状态,顾名思义,要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards | both; none,播放完之后不改变默认行为,默认值,forwards则是停在动画最后的的那个画面,backwards则是回调到动画最开始出现的画面,both则应用为动画结束或开始的状态。

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/woloveprogram/p/5258042.html

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 #HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 #HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 #HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 #HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 #HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 #HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
PyMongo安装使用笔记
2015/04/27 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python 对象和json互相转换方法
2018/03/22 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
财务部会计岗位职责
2015/02/03 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS