博客

css3 动画 总结

  • Post author:
  • Post category:其他


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

转载于:https://www.cnblogs.com/daniao11417/p/9761165.html