<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. MySQL系列(十二)--如何设计一个关系型数据库(基本思路)

    设计一个关系型数据库,也就是设计RDBMS(Relational Database Management System),这个问题考验的是对RDBMS各个模块的划分, 以及对数据库结构的了解.只要讲述 ...

  2. 基于OneMap的水利行业共享服务平台搭建步骤

    今天上午再次学习Esri技术培训中心的“GIS服务共享与运维管理——之OneMap解决方案”课程,从中学习了OneMap的产品架构以及基于OneMap共享服务平台的搭建步骤.下面把其中水利行业的共享服 ...

  3. PAT甲级——A1067 Sort with Swap(0, i)

    Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...

  4. 13_数据的划分和介绍之sklearn数据集

    1.数据集是如何划分?训练数据和评估数据不能使用相同数据,不然自己测自己,会使得准确率虚高,在遇到陌生数据时,不够准确. 2.数据集的获取: 通过load或者fetch方法. 3.数据集进行分割: 训 ...

  5. spark生态圈简介

    原文引自:http://www.cnblogs.com/shishanyuan/p/4700615.html 1.简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algori ...

  6. Free- Linux必学的60个命令

    1.作用 free命令用来显示内存的使用情况,使用权限是所有用户. 2.格式 free [-b|-k|-m] [-o] [-s delay] [-t] [-V] 3.主要参数 -b -k -m:分别以 ...

  7. kuangbin带我飞QAQ 并查集

    1. POJ 2236 给出N个点,一开始图是空白的,两个操作,一个是增加一个点(给出坐标),一个是查询两个点间是否相通,当两点间的距离小于D或者两点通过其他点间接相连时说这两个点相通.并查集维护,每 ...

  8. PKUWC&SC 2018 刷题记录

    PKUWC&SC 2018 刷题记录 minimax 线段树合并的题,似乎并不依赖于二叉树. 之前写的草率的题解在这里:PKUWC2018 minimax Slay the Spire 注意到 ...

  9. day49作业

    结合前端,django,MySQL,pymysql模块实现数据库数据动态展示到前端 效果图: 数据交互流程 urls.py代码: from django.conf.urls import url fr ...

  10. jQuery3动画+创建元素

    一.jQuery的动画 1.jQuery自带的动画 1>变化的是width height opacity display <!DOCTYPE html> <html lang= ...