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 動畫總結