HTML5搖一搖（下）—如何實現簽筒搖動動畫

演示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;
}