原来的时候写过一个小程序，里面有一个播放背景音乐的按钮（也是一个圆形的图片），它是一直在旋转的，当我们点击这个按钮的可以暂停或者播放背景音乐。当初的这个动画，是同事自己写的，我看到的时候以为是他在上面放了一个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>