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 方式 ...
随机推荐
- POJ 1840 HASH
题目链接:http://poj.org/problem?id=1840 题意:公式a1x1^3+ a2x2^3+ a3x3^3+ a4x4^3+ a5x5^3=0,现在给定a1~a5,求有多少个(x1 ...
- 安卓微POS-PDA手持终端，支持离线在线联网销售开单；移动开单 盘点 功能
采购单.采购退货单 销售单.销售退货单.收款.优惠.赠品等操作实现盘点作业(多台设备同时作业,相同商品,数量累计) 现场打印票据 实现采购订单.采购单.采购退货单.销售订单.销售单.销售退货单验货没 ...
- sql server 2008 跨服务器查询
exec sp_addlinkedserver 'ITSV','','SQLOLEDB','192.168.202.53' exec sp_addlinkedsrvlogin 'ITSV','fals ...
- DIjkstra(反向边) POJ 3268 Silver Cow Party || POJ 1511 Invitation Cards
题目传送门 1 2 题意:有向图,所有点先走到x点,在从x点返回,问其中最大的某点最短路程 分析:对图正反都跑一次最短路,开两个数组记录x到其余点的距离,这样就能求出来的最短路以及回去的最短路. PO ...
- Oracle 使用小计（4）
1.oracle字符串分割函数split )定义split_type类型: CREATE OR REPLACE TYPE split_type IS TABLE OF VARCHAR2 (4000) ...
- node.js第一次
随着时代的变迁,日月星辰轮回,不断的有新的事物被创造于世,作为在这个世界活着的前端工程崽的我,最近又接触了一门新手艺“node.js”.自从它2009年诞生至今,被很多前端推崇,我起步已经晚了,还好它 ...
- js 四舍五入保留二位小数
1. 最笨的办法....... [我就怎么干的.........] function get() { var s = 22.127456 + ""; var str = s.sub ...
- H5 浏览器开发文档
http://sja.co.uk/controlling-which-ios-keyboard-is-shown https://developer.apple.com/library/safari/ ...
- BZOJ 3170 & 切比雪夫距离
题意: 给出N个点,在这N个点中选一个点使其它的点与这个点的切比雪夫距离和最小. SOL: TJOI真是...厚道还是防水...这种题目如果知道切比雪夫距离是什么那不就是傻逼题...如果不知道那不就懵 ...
- [深入浅出WP8.1(Runtime)]Toast通知
9.1 Toast通知 Toast通知是在屏幕最顶上弹出来的临时通知,是Windows Phone通用的弹出式短暂的通知,默认的系统消息都是采用Toast通知的形式,比如当你手机收到短信的时候,在手机 ...