css3 實現逐幀動畫
實現逐幀動畫需要使用到的是Animation動畫，該CSS3的Animation有八個屬性；分別是如下：
1: animation-name
2: animation-duration
3: animation-delay
4: animation-iteration-count
5: animation-direction
6: animation-play-state
7: animation-fill-mode
8: animation-timing-function
含義分別如下：
animation-name 規定需要繫結到選擇器的 keyframe 名稱
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。如果設定 infinite 是動畫迴圈播放。
animation-direction 規定是否應該輪流反向播放動畫。
animation-play-state 屬性規定動畫正在執行還是暫停。屬性值有2個；paused(規定動畫已暫停。) running(規定動畫正在播放。)
animation-fill-mode 規定動畫在播放之前或之後，其動畫效果是否可見。 有如下四個值：
1: none（不改變預設行為）;
2: forwards (當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。)
3. backwards 在animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
4. both 向前和向後填充模式都被應用。
其中forwards屬性值經常會被使用到；
animation-timing-function 規定動畫的速度曲線。
至於動畫基本的東西這邊不講解，有空大家可以看看如下這篇文章；http://www.cnblogs.com/tugenhua0707/p/5385261.html
我們先來理解如何做css3的逐幀動畫，該動畫的過程類似於gif動畫；
那麼需要先理解使用動畫函式的屬性 steps；
該屬性值如下使用：
animation: redBag-heart1 5s steps(1, end) infinite;
-webkit-animation: redBag-heart1 5s steps(1, end) infinite;
該屬性值有2個引數：
第一個引數指定了時間函式中的間隔數量（必須是正整數）。
第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。
step-start 等同於steps(1,start)，動畫分成1步，start 第一幀是第一步動畫結束
step-end 等同於steps(1,end)：動畫分成一步，第一幀是第一步動畫開始，預設值為end。
第一個引數是動畫分成幾步完成，它是指兩個關鍵幀之間的動畫，比如如下程式碼：
@keyframes redBag-heart1 { 0% { transform: scale(0.08, 0.08); } 25% { transform: scale(0.2, 0.2); } 40% { transform: scale(0.4, 0.4); } 60% { transform: scale(0.6, 0.6); } 75% { transform: scale(0.8, 0.8); } 90% { transform: scale(1, 1); } 100% { transform: scale(3, 3); } }
它是指如上的 0% 到 25% 兩個關鍵幀分成幾步完成，而不是整個keyframes；因此如果我們設定 steps(1,start)的話，說明是兩個間隔分成1步完成；
基本的知識點就是如上；現在我們可以來做一個css3的逐幀動畫，無非也就是說0% 它是一個什麼樣子的，20%的時候又是一張背景圖，40%又是一張背景圖，這樣的組成起來的；所以我們平時看到的很多動畫，看起來很複雜，其實都是由很多簡單的動作組成起來的；
程式碼如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="author" content="@my_programmer"> <title>webkitAnimationEnd</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <script src="./js/zepto.js"></script> <style type="text/css"> body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;} ul,dl,ol{list-style:none;} img,fieldset{border:none;} img{display:inline-block;overflow:hidden;vertical-align:top;} em,address{font-style:normal;} sup,sub{vertical-align:baseline;} table{border-collapse:collapse;border-spacing:0;} q:before{content:"";} q:after{content:"";} button{cursor:pointer;} textarea{word-wrap:break-word;resize:none;} .hidden {display:none;} /* 撩紅包css3動畫 */ .animate-container { width: 150px; height: 168px; position: absolute; top: 0; left: 0; overflow: hidden; } .redBag-animate { width: 150px; height: 168px; background: url("http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001846147-294383374.png") no-repeat center center; animation: redBag-animate1 5s steps(1, end) 1; -webkit-animation: redBag-animate1 5s steps(1, end) 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } .redBag-heart { position: absolute; top: 0; left: 0; z-index: 99; } .redBag-heart img { animation: redBag-heart1 5s steps(1, end) infinite; -webkit-animation: redBag-heart1 5s steps(1, end) infinite; margin-top: 31px; } @keyframes redBag-heart1 { 0% { transform: scale(0.08, 0.08); } 25% { transform: scale(0.2, 0.2); } 40% { transform: scale(0.4, 0.4); } 60% { transform: scale(0.6, 0.6); } 75% { transform: scale(0.8, 0.8); } 90% { transform: scale(1, 1); } 100% { transform: scale(3, 3); } } @-webkit-keyframes redBag-heart1 { 0% { transform: scale(0.08, 0.08); } 25% { transform: scale(0.2, 0.2); } 40% { transform: scale(0.4, 0.4); } 60% { transform: scale(0.6, 0.6); } 75% { transform: scale(0.8, 0.8); } 90% { transform: scale(1, 1); } 100% { transform: scale(3, 3); } } @-webkit-keyframes redBag-animate1 { 0% { background-position: 0 0; } 14.3% { background-position: 0 -168px; } 28.6% { background-position: 0 -336px; } 42.9% { background-position: 0 -504px; } 57.2% { background-position: 0 -672px; } 71.5% { background-position: 0 -840px; } 100% { background-position: 0 -1008px; } } @keyframes redBag-animate1 { 0% { background-position: 0 0; } 14.3% { background-position: 0 -168px; } 28.6% { background-position: 0 -336px; } 42.9% { background-position: 0 -504px; } 57.2% { background-position: 0 -672px; } 71.5% { background-position: 0 -840px; } 100% { background-position: 0 -1008px; } } </style> </head> <body> <!-- <div class="btn" id="btn">點選動畫</div> --> <div class="animate-container"> <div class="redBag-animate"></div> <div class="redBag-heart hidden"> <img src="http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001921991-1838406901.png" width="100%" class="heart-img"/> </div> </div> <script type="text/javascript"> var animateContainer = document.querySelector(".redBag-animate"); animateContainer.addEventListener("webkitAnimationEnd", function(e) { $(".redBag-heart").removeClass("hidden"); }); var animateHeart = document.querySelector(".heart-img"); animateHeart.addEventListener("webkitAnimationEnd", function(e) { $(".redBag-animate").addClass("hidden"); }); </script> </body> </html>
用於檢測css動畫是否完成的 -- JS程式碼如下：
var animateContainer = document.querySelector(".redBag-animate"); animateContainer.addEventListener("webkitAnimationEnd", function(e) { $(".redBag-heart").removeClass("hidden"); }); var animateHeart = document.querySelector(".heart-img"); animateHeart.addEventListener("webkitAnimationEnd", function(e) { $(".redBag-animate").addClass("hidden"); });