<!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. 洛谷—— P1407 工资

    https://www.luogu.org/problemnew/show/P1407 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工 ...

  2. hdu 1548

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  3. OS: 读者写者问题(写者优先+LINUX+多线程+互斥量+代码)（转）

    一. 引子 最近想自己写个简单的 WEB SERVER ,为了先练练手,熟悉下在LINUX系统使用基本的进程.线程.互斥等,就拿以前学过的 OS 问题开开刀啦.记得当年学读者写者问题,尤其是写者优先的 ...

  4. logstash+es+kibana+redis搭建

    环境信息: CentOS 6.5 redis 3.0.4 logstash elasticsearch kibana 服务端ip:192.168.0.65 客户端ip:192.168.0.66 关系结 ...

  5. Ejb in action（六）——拦截器

    Ejb拦截器可以监听程序中的一个或全部方法.与Struts2中拦截器同名,并且他们都可以实现切面式服务.同一时候也与Spring中的AOP技术类似. 不同的是struts2的拦截器的实现原理是一层一层 ...

  6. 构建基于Javascript的移动web CMS——Hello,World

    在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...

  7. STL之set具体解释（二）

    首先来看看set集合容器: set集合容器实现了红黑树的平衡二叉树数据结构.在插入元素时它会自己主动调整二叉树的排列,把该元素放到适当的位置,而且 保证左右子树平衡.平衡二叉检索树採用中序遍历算法. ...

  8. socketserver模块的使用

    import socketserver class MyTCPhandler(socketserver.BaseRequestHandler): def handle(self): # print(s ...

  9. vue入门-常用指令操作

    指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书 v-model:实现数据和视图的双向绑定 v-text:在元素中插入值 v-html:在元素中插入标签或者插入文本 v-if:根据 ...

  10. CentOS 7.2 , YUM 方式安装VSC

    1.引入VSC站点key和repo地址 sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c ' ...