<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. [转]Entity Framework教程(第二版)

    源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...

  2. DuiLib学习笔记1.编译运行demo

    c++中皮肤问题比较麻烦,MFC自带的太难用.DirectUI界面库就比较强大了,之前像skin++之类的基于DirectUI收费昂贵.DuiLib是基于DirectUI的界面库,可以将用户界面和处理 ...

  3. 基于MFC的实时可视化项目中视图刷新消息的严谨使用

    在实时可视项目中,视图的实时刷新显示对软件的体验感来说非常重要,当算法的效率达到实时,比如一秒40帧,如果实时显示帧率更不上,则体验感将大大折扣,让用户感觉你的算法并没有40帧,当然最关键的是解决显示 ...

  4. 为什么Java中的String是设计成不可变的？（Why String is immutable in java)

    There are many reasons due to the string class has been made immutable in Java. These reasons in vie ...

  5. java最大余数法(百分比算法Echarts)

    最近工作中使用Echarts开发报表的时候遇到了这样的一个问题,需求是一个div中左边是一个环形图表,右边是一个表格,表格中展示图表中每个类别占用的百分比.存在的问题:1.当存在四舍五入的时候,Ech ...

  6. Java - 关于覆盖和重写的总结

    公众号偶然看到的一个帖子,构造方法,类方法,final方法,哪些能覆盖,哪些能重载,初学时也是被这些术语搞的很迷糊 现在有时间了对这些做一个总结.全是自己的语言,可能不是很全面,表达意思应该够清楚 一 ...

  7. 【CF285E】Positions in Permutations

    题目 刷水题涨信心 显然这是个广义容斥,我们现在算一下至少有\(i\)个完美数的方案数就好了 这\(1000\)的数据范围显然在暗示\(n^2\)的dp 我们注意到这个条件大概就是\(P_i=i-1\ ...

  8. Centos7解决在同一局域网内无法使用ssh连接

    参考: https://www.cnblogs.com/liyuanhong/articles/5785368.html 一.修改网卡设置 nano /etc/sysconfig/network-sc ...

  9. React学习整理

    React介绍 React设计思想及其独特,属于革命性创新,性能出众,代码逻辑却非常简单. 库(library):小而巧,库只提供了特定的api.优点是船小好调头,可以很方便的从一个库切换到另外的库, ...

  10. [转]Visual Studio 2010单元测试（1）－－运行和定义普通单元测试

    Visual Studio 2010 运行和定义单元测试 在VS2010中,单元测试的功能很强大,使得建立单元测试和编写单元测试代码,以及管理和运行单元测试都变得简单起来,通过私有访问器可以对私有方法 ...