原來的時候寫過一個小程序，里面有一個播放背景音樂的按鈕（也是一個圓形的圖片），它是一直在旋轉的，當我們點擊這個按鈕的可以暫停或者播放背景音樂。當初的這個動畫，是同事自己寫的，我看到的時候以為是他在上面放了一個gif圖呢。但是沒有想到他是自己寫的一個動畫。早就想自己整理一下關於c3 動畫的一些信息了，今天就在這里小小的總結一下，然后也算是自己的一個小的筆記。
首先說c3動畫，就必須提到animation 這個就相當於咱們寫的background的一樣，是一個c3新增的屬性。這個就能寫動畫了。如果你做其他的動畫，或者flash動畫之類的，一定知道“幀”這個東西。這個是動畫的一個過程，電腦是根據幀，然后渲染得到的一個連續的動畫。看一小段代碼：
.dong{ animation: myfirst 2s linear 0s infinite alternate; }
這個就是我們寫c3動畫中經常用到的屬性。這種連寫的好處就是簡單，但是對於初學者，這個簡直就是噩夢，所以如果我們不熟練的話，可以一個一個的寫，雖然比較繁瑣，但是每個字段什么意思都是清晰可見的。
/** * animation-name 規定需要綁定到選擇器的 keyframe 名稱。。 * animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。 * animation-timing-function 規定動畫的速度曲線。 * animation-delay 規定在動畫開始之前的延遲。 * animation-iteration-count 規定動畫應該播放的次數。 * animation-direction 規定是否應該輪流反向播放動畫。 * **/
這里附上一個鏈接地址，里面有各個屬性的屬性值。點這里
回到咱們上個問題，就是點擊這個按鈕的時候，需要將這個動畫暫停，然后再次點擊的時候開始這個動畫。這個時候就需要用到一個叫做“animation-play-state”的屬性了，他的屬性值我們可以設置為“paused”。當然了實際的生產中，我們肯定是會給這個屬性一個class類名的，然后通過控制這個class類名的添加和刪除，來控制這個動畫的暫停和開始。請看下面的一行css代碼：
.pause { animation-play-state: paused; }
好了，到了這里差不多css3 的動畫就完了。下面附上一段我自己寫的小的demo，但是需要注意的是，這個demo不是我上面說的那個旋轉暫停的，但是這個有了更多的功能。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3 動畫</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <style type="text/css"> 8 @keyframes myfirst{ 9 from { 10 background: red; 11 left: 0px; 12 top: 40px; 13 border-radius: 0; 14 transform:rotate(0deg); 15 } 16 to { 17 background: blue; 18 left: 300px; 19 top: 200px; 20 border-radius: 50%; 21 transform:rotate(360deg); 22 } 23 } 24 .dong{ 25 animation: myfirst 2s linear 0s infinite alternate; 26 } 27 /** 28 * animation-name 規定需要綁定到選擇器的 keyframe 名稱。。 29 * animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。 30 * animation-timing-function 規定動畫的速度曲線。 31 * animation-delay 規定在動畫開始之前的延遲。 32 * animation-iteration-count 規定動畫應該播放的次數。 33 * animation-direction 規定是否應該輪流反向播放動畫。 34 * **/ 35 .pause { 36 animation-play-state: paused; 37 } 38 .big_box{ 39 width: 100px; 40 height: 100px; 41 background: red; 42 text-align: center; 43 line-height: 100px; 44 position: absolute; 45 left: 0px; 46 top: 40px; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="big_box">一個盒子</div> 52 <button class="button1">開始</button> 53 <button class="button2">暫停</button> 54 </body> 55 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 56 <script type="text/javascript"> 57 $(".button2").attr("disabled",true); 58 $(".button1").on("click.animation",function(){ 59 $(".big_box").addClass("dong"); 60 $(".button2").attr("disabled",false); 61 }) 62 $(".button2").on("click.pause",function(){ 63 $(".big_box").toggleClass("pause"); 64 }) 65 66 </script> 67 </html>
---------------------------------------華麗的分割線------------------------------------------------------
既然咱們提到了動畫，那就不能不提到動畫的性能。既然說到性能那肯定又要說道瀏覽器的重繪，回流還有重布局。這樣就很麻煩了，而且動畫不只有css的動畫，jquery也提供了一套動畫。所以我就簡單的總結了一下，如果不准確的話，請各位指教。
操作一個dom元素的位置的話，可以使用css3的transform屬性，這樣會比jquery的動畫快上不少。但是如果是操作一個dom元素的長寬的時候，盡量的使用jquery的動畫。但是需要注意的一點是，jquery的動畫只能設置數字值。也就是說你如果想動態的改變一個元素的背景顏色的話，只能使用css3的動畫。jquery無能為力，最后附上一個鏈接，我感覺寫的比較好。點這里，還有這一個
-------------------------------------新增的內容-------------------------------------------------------
這次寫動畫是一個旋轉動畫，不同的一點是，點擊一個加號，然后讓他旋轉45°成為叉號，然后再次點擊的話，這個叉號，旋轉回來變成了加號。（設計的還挺好的）。這個需要多兩個屬性，是上面沒有用到的。就是
1 animation-iteration-count:1;/*播放一次*/ 2 animation-fill-mode:forwards;/*停在最后一幀*/
播放次數和播放完成之后保留的最后的轉態。這個是這次新用的。然后我把demo也放在下面，方便大家直接觀看。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 .open_add_more { 9 animation: open 0.5s ease-in-out 0s infinite; 10 animation-iteration-count: 1; 11 /*播放一次*/ 12 animation-fill-mode: forwards; 13 /*停在最后一幀*/ 14 } 15 16 @keyframes open { 17 from { 18 transform: rotate(0deg); 19 } 20 to { 21 transform: rotate(45deg); 22 } 23 } 24 25 .close_add_more { 26 animation: close 0.5s ease-in-out 0s infinite; 27 animation-iteration-count: 1; 28 /*播放一次*/ 29 animation-fill-mode: forwards; 30 /*停在最后一幀*/ 31 } 32 33 @keyframes close { 34 from { 35 transform: rotate(45deg); 36 } 37 to { 38 transform: rotate(0deg); 39 } 40 } 41 </style> 42 </head> 43 44 <body> 45 <img src="https://s2.ax1x.com/2019/03/21/A15nF1.png" /> 46 </body> 47 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 48 <script type="text/javascript"> 49 $("img").click(function() { 50 if($(this).hasClass("open_add_more")) { 51 $(this).addClass("close_add_more").removeClass("open_add_more"); 52 53 } else { 54 $(this).addClass("open_add_more").removeClass("close_add_more"); 55 } 56 57 }) 58 </script> 59 60 </html>