<style type="text/css">

.hi {

    width: 50px;

    height: 72px;

    background-image: url("http://s.cdpn.io/79/sprite-steps.png");

    -webkit-animation: play .8s steps(10) infinite;

       -moz-animation: play .8s steps(10) infinite;

        -ms-animation: play .8s steps(10) infinite;

         -o-animation: play .8s steps(10) infinite;

            animation: play .8s steps(10) infinite;

}

@-webkit-keyframes play {

   from { background-position:    0px; }

     to { background-position: -500px; }

}

@-moz-keyframes play {

   from { background-position:    0px; }

     to { background-position: -500px; }

}

@-ms-keyframes play {

   from { background-position:    0px; }

     to { background-position: -500px; }

}

@-o-keyframes play {

   from { background-position:    0px; }

     to { background-position: -500px; }

}

@keyframes play {

   from { background-position:    0px; }

     to { background-position: -500px; }

}

</style>

</head>

<body>

<img src="http://s.cdpn.io/79/sprite-steps.png" />

<div class="hi"></div>

</body>

　　

step（）动画的更多相关文章

  1. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  2. jQuery-4.动画篇---自定义动画

    jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(e ...

  3. javaScript动画2 scroll家族

    offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...

  4. jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

  5. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  6. 巧用 mask-image 实现简单进度加载界面

    最近给 nzoo 折腾官网,拿 angular2.0 + webpack 实现SPA,然后觉得最终打包后的出口文件有点大,用户首次访问会有一个时间较长的白屏等候界面,感觉体验不太好. 于是希望在用户下 ...

  7. Android SurfaceView使用详解

    1. SurfaceView的定义前面已经介绍过View了,下面来简单介绍一下SurfaceView,参考SDK文档和网络资料:SurfaceView是View的子类,它内嵌了一个专门用于绘制的Sur ...

  8. CSS动画-step()帧动画

    Twitter使用了一种新的动画形式,使用一系列的图片来创建帧动画. 下面是一个❤动画,鼠标移动到上面开始绽放. .heart { width: 100px; height: 100px; backg ...

  9. CSS总结六：动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用

    transition-property transition-duration transition-timing-function transition-delay animation-name a ...

  10. AngularJS学习--- 动画操作 (Applying Animations) ngAnimate　step 12

    1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...

随机推荐

  1. uoj279 题目交流通道

    题目:告诉你每两个点之间的最短路距离.构造每条边边权<=m的无向完全图.求有多少种不同边权的图满足最短路限制?n<=400. 标程: #include<cstdio> #inc ...

  2. UVALive-3722 留个坑，为什么费马小定理求逆元不对？？

    #include <iostream> #include <cstdlib> #include <queue> #include <algorithm> ...

  3. [JZOJ4759] 【雅礼联考GDOI2017模拟9.4】石子游戏

    题目 描述 题目大意 在一棵树上,每个节点都有些石子. 每次将mmm颗石子往上移,移到根节点就不能移了. 双方轮流操作,问先手声还是后手胜. 有三种操作: 1. 询问以某个节点为根的答案. 2. 改变 ...

  4. springmvc jar包下载

    (1) springmvc jar包下载 提供地址 - qq_31307253的博客 - CSDN博客https://blog.csdn.net/qq_31307253/article/details ...

  5. day 42 03--CSS布局设置

      03--CSS布局设置   本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 ...

  6. 一行神奇的 javascript 代码

    写本篇文章的缘由是之前群里@墨尘发了一段js代码,如下: (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~ ...

  7. 在菜单栏对应图标点击右键-关闭窗口，javaw.exe进程未关闭。

    问题: 可视化开发时,运行一个工程,总会生成一个javaw.exe进程. 关闭运行程序,javaw.exe还存在. 解决: 运行java工程时,会启动一个新的虚拟机来运行你的程序. 程序退出的时候,这 ...

  8. java基础之Random类

    Random类 Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed), 在种子数的基础上进行一定的变换,从而产生需要的随机数字. 相同种子 ...

  9. 解决Navicat 报错:1130-host is not allowed MySQL不允许从远程访问的方法

    ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL server 解决方法: 1. 改表法.可能是你的帐号不允许 ...

  10. VS2005进行WORD文档开发

    折腾了将近一个月的WORD文档开发终于告一段落.这件事已经很多大牛已经做过了.并且很多方法都已经非常详细,提供的资料也非常齐全.不过由于时间的久远并且较为散乱.所以我在学习时间过程中还是走了一些些弯路 ...