相信 animation 大家都用过很多，知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转，使用 animation-timing-function 规定动画的速度曲线，常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。

今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符，可以让动画不连续，就是制作逐帧动画。

  steps(n,start/end)  

　　第一个参数 number 为把动画分为 n 步阶段性展示，表示把我们的动画分成了多少段；

　　第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

第二个参数具体说就是，emmmm.....................我寄几也没详细看（没理解），附上传送门你们看下张鑫旭大神的讲解  CSS3 animation属性中的steps功能符深入介绍

这里只需要第一个参数就好了

这张素材宽高：2128*241、总共为8帧，故 steps(8)  

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>CSS3 animation属性中的steps实现GIF动图(逐帧动画)</title>

     <style>

         .main {

             margin: 100px auto;

             width: 266px;

             height: 241px;

             background: url(./test.jpg);

             background-size: 2128px;

             animation: sprite5 1s steps(8) infinite

         }

         @keyframes sprite5 {

             0% {

                 background-position: 0 0

             }

             100% {

                 background-position: -2128px 0;

             }

         }

     </style>

 </head>

 <body>

     <div class="main"></div>

 </html>

ok，大功告成，效果预览，当然这张GIF来的

CSS3 animation属性中的steps实现GIF动图(逐帧动画)的更多相关文章

  1. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

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

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

  3. css3 animation实现逐帧动画

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

  4. Android笔记(六十三) android中的动画——逐帧动画（ frame-by-frame animation）

    就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...

  5. css3 实现逐帧动画

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

  6. css3逐帧动画

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

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

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

  8. 过渡与动画 - 逐帧动画&steps调速函数

    写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...

  9. Android中实现一个简单的逐帧动画(附代码下载)

    场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...

随机推荐

  1. my_mysql

    ###一键偷懒YUM安装MySQbL### 1.安装mysql数据库 #yum install -y mariadb-server  mariadb 2.登录mysql数据库常用选项 -h:指定服务端 ...

  2. 如何在Pypi发布上传你自己的Python库

    Pypi上传包 准备 Windows环境 *以下教程只能在Windows上执行,MACOS系统不能使用 注册账号 你需要在Pypi上注册一个账号. 安装必要的库 setuptools 原则上安装了pi ...

  3. 小小知识点（四十八）——发送端已知CSI，基于预编码技术，进一步提高MIMO系统和用户的吞吐量

    1.预编码技术的概念 对于空间复用,LTE既支持开环方式的空间复用(发端未知CSI),也支持闭环方式的空间复用(发端已知CSI) 对于LTE中闭环方式的空间复用(即预编码系统)中,发射机可以根据信道条 ...

  4. Win7旗舰版仅供测试支持正版

    系统效果展示 安装后唯一标准的桌面截图:(如发现安装后与本图不一致,均为第三方安装工具捆绑所为,请注意使用工具!慎用XX桃.XX菜.uXX之类的工具,建议使用推荐的方法安装) 如此清新简洁的安装界面, ...

  5. 扫描器是如何判定有xss漏洞的

    这个问题,看似简单,实则触及到很多人的知识盲区 我们都知道,弹窗就能判定这个页面存在xss, 那么扫描器是怎么判断的呢,或者说扫描器是怎么判断是否弹窗的呢 测试发现 当响应的头中content-typ ...

  6. 面试时面试官想要听到什么答案（关于一些vue的问题）

    前言 自己也只是一个前端的小白,因为公司大佬都比较忙,面试这种事就落到了我这小白身上,第一次叫我去的时候我是百般拒绝的,因为自己还是有自知之明的,但是别人实在抽不开身,没办法只能去了,他们开玩笑说就按 ...

  7. Linux学习_菜鸟教程_1

    Linux系统启动过程:内核的引导 .运行init.系统初始化.建立终端.用户登录系统 内核引导:计算机开机,然后BIOS开机自检,按照BIOS中设置的启动设备(通常是硬盘)来启动. 操作系统接管硬件 ...

  8. Go 每日一库之 go-flags

    简介 在上一篇文章中,我们介绍了flag库.flag库是用于解析命令行选项的.但是flag有几个缺点: 不显示支持短选项.当然上一篇文章中也提到过可以通过将两个选项共享同一个变量迂回实现,但写起来比较 ...

  9. Java 从入门到进阶之路（二十二）

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 中的一些常用方法,本章我们来看一下 Java 集合框架中的Collection 的迭代器 Iterator. 当我们创建 ...

  10. Java知识体系框架

    前言:自从出生,每个人都是一个学习者或探索者.永远保持一颗谦逊的心态,遵循一定的方法和规范,去学习和实践,永远记得走走停停,多回头看看自己走过的路,温故而知新,也能更好地指导未来的路怎么走(同样,本篇 ...