<!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. 网络流24T 太空飞行计划问题

    题目背景 题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,…,Em},和进行这些实验需要使用的 ...

  2. Spring实战Day3

    通过XML创建装配bean 1.装配不存在成员变量的bean <bean id="talent" class="cn.jqzhong.Spring.study.da ...

  3. Java中String/StringBuffer/StringBuilder区别（转）

    1.三者在执行速度方面的比较:StringBuilder >  StringBuffer  >  String 2.String <(StringBuffer,StringBuild ...

  4. javascript --- 原型继承与属性拷贝的综合应用

    对于继承来说,主要目标就是将一些现有的功能据为己有.也就是说,我们在新建一个对象的时候,通常首先继承现有对象,然后再为其添加额外的属性和方法. 对此,我们可以通过一个函数调用来完成. 具体而言就是: ...

  5. "visual studio 2012 安装引擎拒绝访问" 错误的解决

    首先,我们看一下错误的具体提示,如下图所示: 这个错误,是我安装了那么多年Visual Studio的经历中,第一次遇到.太恶心了,昨天一直安装失败,导致后续其它软件的安装一再拖延.目前网上的解决方案 ...

  6. 深入理解Activity启动流程(三)–Activity启动的详细流程2

    本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--A ...

  7. 自己定义一个Dialog样式的Activity窗体，切换到Dialog的方法

    首先定义一个style 在style里面加入 <style name="MyDialog" parent="@android:Theme.Dialog"& ...

  8. 自己写的通过ADO操作mysql数据库

    #include <iostream> #include <windows.h> #include <atlstr.h> #import "c:\Prog ...

  9. session写入数据库

    <?php class session { private static $handle = null; private static $ip = null; private static $l ...

  10. AVL平衡树的插入例程

    /* **AVL平衡树插入例程 **2014-5-30 11:44:50 */ avlTree insert(elementType X, avlTree T){ if(T == NULL){ T = ...