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(n,[ start | end ] ]?)这个阶梯函数，这个函数可以把动画平均划分为基本相等的，这个n是一个自然数，意思就是把一个动画平均分成n等分，直到平均地走完这个动画，这个要跟linear区别开来，因为linear是把动画作为一个整体，中间没有断点，而steps是把动画分段平均执行开来。step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。对此，w3c图解如下： 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css3 逐帧动画</title>
    <style>
        .fly{
            position: absolute;
            left: 100px;
            top: 100px;
            width: 126px;/*单个画面图片宽度*/
            height: 184px;
            background: url(ren.png) no-repeat;/*图片宽度是126*3*/

            /*-webkit-animation: run 500ms steps(1) infinite 0s;*/

            -webkit-animation: run2 500ms steps(2) infinite 0s;
        }
        /* 动画方式一 */
        @-webkit-keyframes run{

            0%{
                background-position: 0px;
            }
            25%{
                background-position: -126px 0;
            }
            50%{
                background-position: -252px 0;
            }
            100%{
                background-position: 0px;
            }
        }
        /* 动画方式二 */
        @-webkit-keyframes run2{

            50%{
                background-position: -252px 0;
            }
        }
    </style>
</head>
<body>
    <span class="fly"></span>
</body>
</html>

　　

css3-逐帧动画的更多相关文章

  1. css3逐帧动画

    写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...

  2. css3 animation实现逐帧动画

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

  3. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  4. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  5. animation中的steps()逐帧动画

    在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

  6. 利用css3-animation来制作逐帧动画

    前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...

  7. 使用node.js开发一个生成逐帧动画小工具

    在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...

  8. Android动画效果之Frame Animation（逐帧动画）

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  9. Android 逐帧动画

    原理: 逐帧动画是最简单的一种动画.原理就是把几张图片连续显示出来,以达到动画的效果.就相当于下面这种手绘翻页动画啦~ 实现: 1.需要建立一个animation-list来设置静态图片资源.持续时间 ...

  10. 逐帧动画(Frame-by-frame Animations)

    1.这一类动画可以创建一个Drawable序列,这些Drawable可以按照指定的时间间歇一个一个的显示. xml定义方法 <animation-list xmlns:android=" ...

随机推荐

  1. DOM范围

    前面的话 为了让开发人员更方便地控制页面,DOM定义了“范围”(range)接口.通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的).在常规的DOM操作不能更有 ...

  2. C语言字节数组转换为基本数据类型

    首先,必须明确基本类型在不同环境下字节的大小 这里用到了unsigned char:1  int:4  double:8 自己主要想用的是将字节数组转换为int型,double型 具体来说,将接收到的 ...

  3. 读书笔记 effective c++ Item 15 在资源管理类中提供对原生(raw)资源的访问

    1.为什么需要访问资源管理类中的原生资源  资源管理类是很奇妙的.它们是防止资源泄漏的堡垒,没有资源泄漏发生是设计良好的系统的一个基本特征.在一个完美的世界中,你需要依赖这样的类来同资源进行交互,绝不 ...

  4. 配置FindBugs和常见FindBugs错误

    配置FindBugs: 在这里可以对FindBugs规则等进行详细设置. 选择你的项目,右键 => Properties => FindBugs => 1 Run Automatic ...

  5. 分布式配置管理--百度disconf搭建过程和详细使用

    先说官方文档:http://disconf.readthedocs.io/zh_CN/latest/index.html 不管是否要根据官方文档来搭建disconf,都应该看一下这一份文档.精炼清晰地 ...

  6. STM32F4的FPU单元讲解

    搞STM32F407单片机的时候 看见的关于STM32F4系列的FPU 单元讲解 比较精彩的博客  于是特意转载 和大家分享 转自:http://blog.renren.com/blog/256814 ...

  7. 利用jink的驱动软件j-flash 合并两个hex的方法，bootloader+app

    由于前几天要给工厂app和bootloader的hex的文件,网上很多都是bin的合并方法,bin的方法不再赘述,相信大家都能找到,现在将hex合并的方法写下来: 第一步:先打开第一个hex文件, 第 ...

  8. 关于ASP.NET Web Api的HelpPage文档注释问题

    关于ASP.NET Web Api的HelpPage文档注释问题 以前我用微软的HelpPage来自动生成的webAPI帮助文档.在使用了一段时间后发现只能显示Controller上面写的注释文档内容 ...

  9. 如何用好消息推送（JPush）为app拉新、留存、促活

    如何用好消息推送(JPush)为app拉新.留存.促活 作为移动端APP产品运营最重要的运营手段,消息推送(JPush)被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越 ...

  10. Vue开源项目库汇总

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...