<!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. NavBarControl（侧边导航栏）

  2. ZSTU 4241 圣杯战争（ST表+二分）

    题目链接  ZSTU 4241 问题转化为有很多区间,现在每次给定一个区间求这个区间和之前所有区间中的某一个的交集的最大长度. 强制在线. 首先我们把所有的区间预处理出来. 然后去重(那些被包含的小区 ...

  3. guava之cache

    转自:http://ifeve.com/google-guava-cachesexplained/ 范例 01 LoadingCache<Key, Graph> graphs = Cach ...

  4. char *argv[] 与 char **argv

    #include<stdio.h> #include<string.h> int main(int argc,char *argv[])//同int main(int argc ...

  5. Codeforces Gym 100203E bits-Equalizer 贪心

    原题链接:http://codeforces.com/gym/100203/attachments/download/1702/statements.pdf 题解 考虑到交换可以减少一次操作,那么可以 ...

  6. Linux Perf Probes for Oracle Tracing

    Luca Canali on 21 Jan 2016 Topic: this post is about Linux perf and uprobes for tracing and profilin ...

  7. cookie读取设置name

    cookie就是k-v形式,可以理解为一个hashmap cookie就是k-v形式,可以理解为一个hashmap cookie就是k-v形式,可以理解为一个hashmap 建立一个无生命周期的coo ...

  8. Hibernate中的对象状态，及自动更新原因，Hibernate set对象后不调用update却自动更新

    原文:http://www.cnblogs.com/xiaoda/p/3225617.html Hibernate的对象有三种状态,分别为:瞬时状态 (Transient). 持久化状态(Persis ...

  9. uitableview使用reloaddata不管用

    原因在于决定row number得array变动后没有再次将其count赋值给numberOfRowsInSection中返回的成员变量.致使没有其作用

  10. 【hibernate】唯一约束 注解

    唯一约束注解 单列约束和联合约束 分别如下 @Table( uniqueConstraints = { @UniqueConstraint(columnNames = "uid") ...