steps animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
PS 摘自：http://www.cnblogs.com/Fengzp/p/5548493.html#
steps animation的更多相关文章
- 过渡与动画 - steps调速函数&CSS值与单位之ch
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- 过渡与动画 - 逐帧动画&steps调速函数
写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...
- CSS3 Animation 帧动画 steps()
@keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ...
- 深入理解CSS3 Animation 帧动画 ( steps )
作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...
- 深入理解CSS3 animation的steps
在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function> .它的取值中除了常用到的三次贝塞尔曲线以外,还有个让人比较困惑的 steps() 函数. steps ...
- CSS3 animation的steps方式过渡
animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果 是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不 ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- 用animation的steps属性制作帧动画
昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去.再用translate3d来操作.然而UI考虑 ...
- CSS3使用Animation steps属性实现指针时钟效果
本篇文章由:http://xinpure.com/css3-animation-steps-properties-for-analogue-effects/ animation 默认以 ease 方式 ...
随机推荐
- windows主机开启openssl的方法
转自:http://www.feichang56.com/openssl/
- [转载]explicit关键字
本文转自http://www.programlife.net/cpp-explicit-keyword.html. 其实explicit主要用于防止隐式转换,用于修饰构造函数.复制构造函数[注意:一般 ...
- hdu2191 多重背包
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=2191 多重背包:有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...
- poj1061 Exgcd
#include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...
- 【hdu3948-不同回文串的个数】后缀数组
题意:求不同回文串的个数 n<=10^5 题解: 先按照manacher的构造方法改造一遍串,然后跑一遍manacher. 如ababa--> $#a#b#a#b#a#@ 然后跑一遍后缀数 ...
- Spring - 配置Bean - 自动装配 关系 作用域 引用外部属性文件
1 Autowire自动装配1.1 使用:只需在<bean>中使用autowire元素<bean id="student" class="com.kej ...
- three.js入门2
新建一个html文件 <!DOCTYPE html> <html> <head> <title></title> <style> ...
- start bbs轻论坛安装时数据库提示错误
A PHP Error was encounteredSeverity: NoticeMessage: Only variable references should be returned by r ...
- 如何清除swap里的文件
vi打开一个文件的时候突然断网,再次连接上去vi打开的时候提示在swap里面已经存在一个.要删除这个文件怎么办呢? 如下: 关了swapoff -a后 再ls -al查看 把文件所在目录里*.swp结 ...
- iOS之07-三大特性之多态 + NSString类
多态 1.没有继承就没有多态 2.代码体现:父类类型的指针指向子类对象 类的创建: #import <Foundation/Foundation.h> // 动物 @interface A ...