<!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. jQuery使用on()绑定动态生成元素的事件无效

    jquery on()方法是jquery1.7+后才使用的 由于需求:动态添加了以下代码 <tr class="pj" data-val="no"> ...

  2. iOS Mobile Development: Using Xcode Targets to Reuse the Code 使用xcode targets来实现代码复用

    In the context of iOS mobile app development, a clone is simply an app that is based off another mob ...

  3. Android 存储(本地存储 SD卡存储 SharedPreference SQLite ContentProvider)

    本文出自:http://blog.csdn.net/dt235201314/article/details/73176149 源码下载欢迎Star(updating):https://github.c ...

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

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

  5. Java常见面试题汇总(一)

    1)什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个能够运行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机运行的字节 ...

  6. vue 给组件绑定原生事件

    有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...

  7. valid-palindrome——判断带符号数字字母的字符串是否为回文

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  8. mysql 执行sql文件的方法

     http://philos.iteye.com/blog/162051   实战代码: #mysql导入mysql -um4n -p01D060A476642BA8335B832AC5B211F22 ...

  9. upstart man

    man upstart nit(8) init(8) NAME init - Upstart process management daemon SYNOPSIS init [OPTION]... D ...

  10. nginx使用指南

    1.执行nginx 能够执行nginx命令开启nginx: nginx 假设nginx已经开启了,能够执行nginx命令加-s 參数来控制nginx的执行 nginx -s signal signal ...