<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. CF961F k-substring

    题意:给你一个字符串(sl<=1e6),问每一个起点到1和终点到sl距离相等的子串的最长不等于串长的border. 标程: #include<cstdio> #include< ...

  2. IDEA Error:java: Compilation failed: internal java compiler error 解决方案

    这是由于版本不一致导致的 file => settings => 搜索找到Java Compiler 把相应jdk版本改成1.8 ctrl+alt+s

  3. Lydsy2017省队十连测

    5215: [Lydsy2017省队十连测]商店购物 可能FFT学傻了,第一反应是前面300*300背包,后面FFT... 实际上前面背包,后面组合数即可．只是这是一道卡常题,需要注意常数．． //A ...

  4. 《你不知道的javascript》上卷笔记整理(一)

    函数声明和变量声明都会被提升,但函数声明会被提升到普通变量前,而 var foo = function bar(){}; 赋值操作不会被提升. 闭包: 基于词法作用域(作用域是根据名称查找变量的一套规 ...

  5. jquery.cookie.js时间设置

    var expiresDate= new Date(); expiresDate.setTime(expiresDate.getTime() + (120*60*1000)); $.cookie('u ...

  6. Maven的作用及简介

    Maven的作用及简介 一.maven作用 项目之间都是有依赖的,比如A项目依赖于B项目,B项目依赖与C.D项目,等等.这样的依赖链可能很长. 但是,没有一个项目的jar包我们都要导入进去,我们要做的 ...

  7. Windows安全证书生成方法（开发者证书）

    首先,查看本机安装的证书可在“运行”中输入:certmgr.msc 一.win8.8.1.win10系统,使用管理员powershell创建证书: (1)利用如下命令来创建证书并获取到其指纹 New- ...

  8. PAT甲级——A1003Emergency

    As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...

  9. NTP时钟同步学习记录

    --1 要点回顾 . 1. NTP唯一配置文件:/etc/ntp.conf . 2. NTP系统日志记录:/var/log/ntp . 3. ntp.conf简要介绍 - 利用 restrict 来管 ...

  10. 启用或禁用对 Exchange Server 中的邮箱的 POP3 或 IMAP4 访问

    https://docs.microsoft.com/zh-cn/Exchange/clients/pop3-and-imap4/configure-mailbox-access?view=exchs ...