相信 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)
CSS3 animation属性中的steps实现GIF动图(逐帧动画).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;
}
}
ok，大功告成，效果预览，当然这张GIF来的
css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
css3 animation实现逐帧动画
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
Android笔记(六十三) android中的动画——逐帧动画( frame-by-frame animation)
就好像演电影一样,播放实现准备好的图片,来实现动画效果. 逐帧动画需要用到AnimationDrawable类,该类主要用于创建一个逐帧动画,然后我们把这个动画设置为view的背景即可. androi ...
css3 实现逐帧动画
css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...
css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...
Android动画效果之Frame Animation(逐帧动画)
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
过渡与动画 - 逐帧动画&;steps调速函数
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 ...
随机推荐
java的向上转型总结
在中对'向上转型'有着如下的描述 看完之后很蒙圈,所以自己在网上找了一些描述,并自己做了简单的总结 简单的例子 class A{ public void A1 ...
SQL Server中参数化SQL写法遇到parameter sniff ，导致不合理执行计划重用的一种解决方案
parameter sniff问题是重用其他参数生成的执行计划,导致当前参数采用该执行计划非最优化的现象.想必熟悉数据的同学都应该知道,产生parameter sniff最典型的问题就是使用了参数化的 ...
细说static关键字及其应用
场景 先看段代码,考虑以下场景,其运行结果是什么? public class Test { static int i = 8; public void printI() { int i = 88; S ...
java中使用 正则 抓取邮箱
我们来抓取豆瓣网的邮箱吧!把这个页面的所有邮箱都抓取下来 如https://www.douban.com/group/topic/8845032/: 代码如下: package cn.zhangzon ...
mysql创建数据库指定编码
GBK: create database test2 DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci; UTF8: CREATE DATABASE ` ...
MYSQL交换两列数据实例
UPDATE cf_2015_company a, cf_2015_company bSET a.cname = b.linkman, a.linkman = b.cnameWHERE a.id = ...
Office2007设置无格式粘贴
打开Word 2007,按Alt+F11.这时会出现一个Visual Basic编辑窗口.如图所示: 上图中左上方,鼠标右击Normal→插入→模块,出现下图: 双击"模块1&q ...
javascript每日一练(八)——事件三：默认行为
一.阻止默认行为 return false; 自定义右键菜单
android学习11——Handler,Looper,MessageQueue工作原理
Message是Handler接收和处理的消息对象. 每个线程只能拥有一个Looper.它的loop方法读取MessageQueue中的消息,读到消息之后就把消息交给发送该消息的Handler进行处理 ...
查找 GPU 计算能力
你能在这里找到你的 GPU 的计算能力: https://en.wikipedia.org/wiki/CUDA#Supported_GPUs
