<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. MongDB4.1-入门学习之下载安装配置

    下载安装配置三步走 下载,MongoDB官网下载中心 下载_.msi_安装版 安装,注意以下几个步骤: Choose Setup Type: Please Choose Custom Custom S ...

  2. 今天给各位介绍Linux touch命令详述

    触摸命令 touch命令有两个功能:一个是将现有文件的时间戳更新为系统的当前时间(默认模式),它们的数据将保持不变;第二个是创建一个新的空文件. 语法 触摸(可选) 最常见的用法:touch file ...

  3. JUC 一 CopyOnWriteArrayList 和 CopyOnWriteArraySet

    java.util.concurrent; 简介 CopyOnWriteArrayList是一个线程安全的ArrayList,通过内部的volatile数组和显式锁ReentrantLock来实现线程 ...

  4. LUOGU P3382 【模板】三分法 (三分)

    传送门 解题思路 三分,填坑.每次取l与r的中间值mid,然后向左移一点点,向右移一点点进行判断,判断时用秦九韶算法即可. #include<iostream> #include<c ...

  5. System.Web.Mvc.ViewResult.cs

    ylbtech-System.Web.Mvc.ViewResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicK ...

  6. 组件：基础的基础组件（Component,Portlet）

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  7. 2019牛客暑期多校赛（第三场）B-求01串中的最长01数量相等的子串和子序列

    https://ac.nowcoder.com/acm/contest/883/B 首先先把0所在的位置变-1,1所在位置变1,然后统计一个前缀和,用sum[i]表示. 那么如果从起点开始的话只要满足 ...

  8. vue-cli的使用指南

    vue-cli 2.0 安装vue-cli npm install -g vue-cli 创建一个项目模板 vue init <template-name> <project-nam ...

  9. C/C++ 信号量 CreateSemaphore 用法

    HANDLE CreateSemaphore( LPSECURITY_ATTRIBUTES lpSemaphoreAttributes, // SD LONG lInitialCount, // in ...

  10. 09.Hibernate中的事务与并发

    事务1. 什么是事务 * 事务就是逻辑上的一组操作,组成事务的各个执行单元,操作要么全都成功,要么全都失败. * 转账的例子:冠希给美美转钱,扣钱,加钱.两个操作组成了一个事情! 2. 事务的特性 * ...