演示demo：“ 摇一摇，万福签 ”

上一篇博客( HTML5摇一摇—如何判断设备摇动（上） )中讲到了如何利用HTML5中的DeviceOrientationEvent和DeviceMotionEvent来实现手机摇一摇的判断，这次主要来讲如何利用CSS3实现签筒摇动的动画

半透明遮罩层

/* 半透明遮罩层 */  .cover {      background: rgba(0, 0, 0, 0.7) no-repeat top right;      position: fixed;      width: 100%;      height: 100%;      top: 0;      left: 0;      display: none;  }

CSS3动画关键帧

这里我们所用到的素材其实就是6张连续摇动的签筒所拼成的一张大图：

实现这个动画有两个思路：

1. 把动画分成一步，动画开始以结尾端点为起点开始执行，然后在0%，20,40,80,100执行了背景图的切换

2. 第二种是动画分成5步，然后每一步在100%处的时候调用最后一张背景图这里我们就拿第二种实现方法来举例

接下来我们利用CSS3中的 @keyframes 来定义的动画的关键帧，其中 －737px －2px 表明每一步动画都会往右移737像素并上移－2px

@keyframes play {      100% {          background-position: -737px -2px;      }  }  /*为了兼容性考虑，可能还需要加上浏览器厂商的前缀，  例如下面给只出了webkit内核的浏览器厂商前缀，  其他的还有-moz-animation，-o-animation */  @-webkit-keyframes play {      100% {          background-position: -737px -2px;      }  }

调用我们定义的CSS3关键帧

这里我们利用 steps() 这个函数把动画平分成5等份，每份0.8s（100%处的时候调用最后一张背景图）， infinite 参数则会让动画无限循环播放

.sprite {      width: 145px;      height: 300px;      display: inline-block;      overflow: hidden;      background: url('./img/animation.png') no-repeat -2px -2px;      animation: play 0.8s steps(5) infinite;      -webkit-animation: play 0.8s steps(5) infinite;  }

来自： http://segmentfault.com/a/1190000004325435