<!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. [Bzoj5359][Lydsy1805月赛]寻宝游戏（dp）

    5359: [Lydsy1805月赛]寻宝游戏 Time Limit: 2 Sec  Memory Limit: 512 MBSubmit: 71  Solved: 19[Submit][Status ...

  2. codeforces 997E(线段树)

    分析: 首先考虑如何计算整个数组有多少个good区间 容易发现一个区间是good区间当且仅当max-min-len=-1,且任意区间max-min-len>=-1 我们可以枚举右端点,然后维护前 ...

  3. java布局（每个名字都是有意义的）

    一.FlowLayout 1.流水布局:从左至右,排满换行 2.构造函数有三种: (1)FlowLayout() (2)FlowLayout(align) (3)FlowLayout(align, h ...

  4. react/redux组件库、模板、学习教程

    开源的有蚂蚁金服的: 1.https://pro.ant.design/index-cn 2.https://pro.ant.design/docs/getting-started-cn 3.http ...

  5. SilverLight-DataBinding：二、Bingding to a Collection Objects(绑定一个集合对象)

    ylbtech-SilverLight-DataBinding: Bingding to a Collection Objects(绑定一个集合对象) 1.A, Building  a Data Ob ...

  6. vue2.0 自定义指令

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...

  7. WMS8_基本操作

    建立分拣[收货.出货.领料]         点击仪表盘上的任何一个 All operations 链接切换至分拣 列表视图         点击 creae 按钮,建立一个新的分拣     part ...

  8. NoSQL数据库-MongoDB和Redis

    http://blog.csdn.net/tea_wu/article/details/19050277 http://www.uml.org.cn/sjjm/201212205.asp

  9. Codeforces Round #277 (Div. 2)D（树形DP计数类）

    D. Valid Sets time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...