css3 动画总结

时间 2019-11-24

标签 css3 css 动画总结栏目 CSS 繁體版

原文原文链接

　　原来的时候写过一个小程序，里面有一个播放背景音乐的按钮（也是一个圆形的图片），它是一直在旋转的，当咱们点击这个按钮的能够暂停或者播放背景音乐。当初的这个动画，是同事本身写的，我看到的时候觉得是他在上面放了一个gif图呢。可是没有想到他是本身写的一个动画。早就想本身整理一下关于c3 动画的一些信息了，今天就在这里小小的总结一下，而后也算是本身的一个小的笔记。javascript

　　首先说c3动画，就必须提到animation 这个就至关于我们写的background的同样，是一个c3新增的属性。这个就能写动画了。若是你作其余的动画，或者flash动画之类的，必定知道“帧”这个东西。这个是动画的一个过程，电脑是根据帧，而后渲染获得的一个连续的动画。看一小段代码：css

.dong{
         animation: myfirst 2s linear 0s infinite alternate;    
     }

这个就是咱们写c3动画中常常用到的属性。这种连写的好处就是简单，可是对于初学者，这个简直就是噩梦，因此若是咱们不熟练的话，能够一个一个的写，虽然比较繁琐，可是每一个字段什么意思都是清晰可见的。html

/**
             * animation-name    规定须要绑定到选择器的 keyframe 名称。。
             * animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
             * animation-timing-function    规定动画的速度曲线。
             * animation-delay    规定在动画开始以前的延迟。
             * animation-iteration-count    规定动画应该播放的次数。
             * animation-direction    规定是否应该轮流反向播放动画。
             * **/

这里附上一个连接地址，里面有各个属性的属性值。点这里java

　　回到我们上个问题，就是点击这个按钮的时候，须要将这个动画暂停，而后再次点击的时候开始这个动画。这个时候就须要用到一个叫作“animation-play-state”的属性了，他的属性值咱们能够设置为“paused”。固然了实际的生产中，咱们确定是会给这个属性一个class类名的，而后经过控制这个class类名的添加和删除，来控制这个动画的暂停和开始。请看下面的一行css代码：jquery

.pause {
    animation-play-state: paused;
}

好了，到了这里差很少css3 的动画就完了。下面附上一段我本身写的小的demo，可是须要注意的是，这个demo不是我上面说的那个旋转暂停的，可是这个有了更多的功能。css3

 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无能为力，最后附上一个连接，我感受写的比较好。点这里，还有这一个dom

　-------------------------------------新增的内容-------------------------------------------------------布局

　　此次写动画是一个旋转动画，不一样的一点是，点击一个加号，而后让他旋转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>

css3 动画 总结

css3 动画总结