利用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中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 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
用PHP发电子邮件
2006/10/09 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
Js的MessageBox
2006/12/03 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python实现俄罗斯方块游戏
2020/03/25 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python树的同构学习笔记
2019/09/14 Python
Python简单实现区域生长方式
2020/01/16 Python
详解python的变量缓存机制
2021/01/24 Python
如何用SQL语句进行模糊查找
2015/09/25 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
个人简历自我评价
2014/02/02 职场文书
医院院务公开实施方案
2014/05/03 职场文书
优秀员工演讲稿
2014/05/19 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
西安事变观后感
2015/06/12 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库