深入理解CSS3 animation的steps
在应用 CSS3 渐变/动画时，有个控制时间的属性 <timing-function> 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 steps() 函数。
steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。
那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>spirit动画</title>
<link rel="stylesheet" href="">
<style>
.bird{background: url(http://www.china-pub.com/static/alltype_zt/060710flash_1/market_1_9.jpg);width: 140px;height:85px;animation: bird 0.8s steps(4) infinite; }
@keyframes bird{
from {
background-position: 0 0;
}
to {
background-position: -400% 0px;
}
}
</style>
</head>
<body>
<div class="bird"></div>
</body>
</html>
其原理是：使用一张含有多帧静态画面的图片，通过切换 background-position 使其变为连续的动画。上面例子中steps(4)，表示让整个动画在4个关键帧之间切换。这个飞翔的鸟的图片中包含了4帧，所以这里设置了4；
深入理解CSS3 animation的steps的更多相关文章
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- 深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- 深入理解CSS3 Animation 帧动画（转）
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- CSS3 animation的steps方式过渡
animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果 是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不 ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS3 animation 与JQ animate()的区别
CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
随机推荐
- VS2013添加NuGet的方法
1.工具->扩展和更新->联机 2.右上角搜索框搜索NuGet,选择NuGet Package Manager for Visual Studio 2013,安装后重启VS 下面通过添加N ...
- .NET Web开发总结(三)
第五章 ASP.NET 页面语法 本章详细讲解.NET页面的语法结构 一般情况下 一个ASP.NET页面要包括页面编译指令 HTML页面框架及Web窗体 服务器端控件 服务器端代码 ...
- ASP.NET中@Page指令中的AutoEventWireup
AutoEventWireup:指示控件的事件是否自动匹配 (Autowire).如果启用事件自动匹配,则为 true:否则为 false.默认值为 true.如果设为false,则事件不可用.有关更 ...
- 输出内容（document.write）四种写法
第一种:输出内容用""括起,直接输出""号内的内容 <script type="text/javascript"> docume ...
- php中iconv函数使用方法
最近在做一个程序,需要用到iconv函数把抓取来过的utf-8编码的页面转成gb2312, 发现只有用iconv函数把抓取过来的数据一转码数据就会无缘无故的少一些. iconv函数库能够完成各种字符集 ...
- yii在TbGridView的td里面加入相应的下拉选项（转）
当你需要在一个GridView渲染某一个复杂元素的时候(特别是在这种情况下,这是一个小部件),这就需要你在控制器中调用一个动作.例如你给一个GridView的定义这样的一列: <?php $th ...
- xcode编译错误总结
No architectures to compile for(ONLY_ACTIVE_ARCH=YES 这种错误 修改building settings下 Build Active Archi ...
- 老外写的在桌面添加快捷方式（DELPHI XE5 ANDROID）
UsesAndroidapi.JNI.GraphicsContentViewText, FMX.Helpers.Android,Androidapi.JNI.JavaTypes, FMX.Platfo ...
- jquery学习笔记(4)--实现table隔行变色以及单选框选中
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jQuery学习笔记(2)
val() 当鼠标放上去的时候,文本消失,鼠标拿开,文本恢复 效果图: code as below: <html xmlns="http://www.w3.org/1999/xhtml ...