<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>

		<style type="text/css">

			.test{

				width: 140px;

				height: 150px;

				background: url(img/sprites.png) no-repeat;

				animation: lily 0.6s steps(12)  infinite;

			}

			@keyframes lily{

				0%{

					background-position: 0 0;

				}

				100%{

					background-position: -1680px 0;

				}

			}

		</style>

	</head>

	<body>

		<div class="test">

		</div>

	</body>

</html>

　参考说明文档：https://idiotwu.me/understanding-css3-timing-function-steps/　

animation steps属性实现帧动画的更多相关文章

  1. 用animation的steps属性制作帧动画

    昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去.再用translate3d来操作.然而UI考虑 ...

  2. CSS3使用Animation steps属性实现指针时钟效果

    本篇文章由:http://xinpure.com/css3-animation-steps-properties-for-analogue-effects/ animation 默认以 ease 方式 ...

  3. css3逐帧动画

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

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

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

  5. CSS3 Animation 帧动画 steps()

    @keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...

  6. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

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

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

  8. Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation

    程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...

  9. Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)

    1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...

随机推荐

  1. Codeforces 576D Flights for Regular Customers（矩阵加速DP）

    题目链接  Flights for Regular Customers 首先按照$d$的大小升序排序 然后分成$m$个时刻,每条路径一次处理过来. $can[i][j]$表示当前时刻$i$能否走到$j ...

  2. jenkins的Pipeline代码流水线管理

    1.新建一个pipline任务 2.自写一个简单的pipline脚本 a.Pipeline的脚本语法在Pipeline Syntax中,片段生成器,示例步骤中选择builf:Build a job b ...

  3. Java线程池的内部实现

    一.线程池介绍 线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池可以对线程进行统一的分配.调优和监控,并有以下好处: (1)降低资源消耗. (2)提高响应速 ...

  4. man

    Description n间房子高度不同,Man 要从最矮的房子按照高度顺序跳到最高的房子,你知道房子的顺序,以及Man一次最远可以跳多远,相邻的房子至少有1的距离,房子的宽不计,现在由你安排相邻房子 ...

  5. 随笔：Golang 时间Time

    先了解下time类型: type Time struct { // sec gives the number of seconds elapsed since // January 1, year 1 ...

  6. python的私有化

    1.双下划线(__) 由双下划线開始的属性在执行时被混淆,所以直接訪问是不同意的.实际上以双下划线開始的属性 会在解释时在前面加上下划线和类名.如self.__num会被解析为self._classN ...

  7. iOS加急审核之2015年总结

    就在今天到公司的一会,查看了一下邮件,收到Apple的回复,今年的第六次加急审核通过了. 然后,想想明天就是西方的圣诞节假期了,从22日到29日的这段时间,Apple会暂时关闭iTunesconnec ...

  8. mysql delete auto_increment列时的注意问题

    1. 说明 在对带有AUTO_INCREMENT列的表delete掉所有数据时: (1)对于MyISAM表,在delete表中所有数据时没有任何风险,随意折腾: (2)对于InnoDB表,在delet ...

  9. Tachyon源代码结构分析（二）

    公布人:南京大学PASA大数据实验室顾荣 前言 在上一篇<Tachyon源代码结构分析(一)>中,我们介绍了Tachyon的四大模块(Client模块.Master模块.Worker模块以 ...

  10. gulp是用来干什么的？（概念）

    当我们在使用gulp的时候,gulp到底用来干什么呢? 编译 sass 合并优化压缩 css 校验压缩 js 优化图片 添加文件指纹(md5) 组件化头部底部(include html) 实时自动刷新 ...