animation CSS3動畫總結

時間 2019-11-12

標籤 animation css3 css 動畫總結欄目 CSS 简体版

原文原文鏈接

　　最近一個小遊戲項目用到了CSS3的動畫屬性，例如transition、transform、animation。通過三個星期，終於作完了，利用週末好好梳理總結一下。javascript

keyframes
這個屬性用來定義一系列關鍵幀。也就是在動畫運行的全過程當中的一個個中間點。

Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。css

Chrome 和 Safari 須要前綴 -webkit-。html
animation的屬性

animation 縮寫

animation: name duration timing-function delay iteration-count direction;

一些重點難點的理解
animation-delay
這個屬性是規定動畫開始前等待幾秒纔開始。原本是很好理解的，可是當時就有個疑問：假如個人動畫是連續執行好屢次的狀況下的話，是第一次執行前纔會延遲仍是每次執行前都會延遲呢？答案是：只有第一次會。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>delay</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 
 8 <style type="text/css">
 9     @-webkit-keyframes delay{
10         
11         99%{
12             -webkit-transform:translate(100px,0);
13         }
14        
15     }
16     .delay{
17 
18         width:100px;height:100px;
19         background-color: #000;
20         -webkit-animation:delay 1s linear 2s infinite;
21         animation:delay 1s linear 2s infinite;
22     }
23 </style>
24 </head>
25 <body>
26     <div class="delay"></div>
27 </body>
28 </html>

animation-fill-mode
該屬性有四個值
none：默認值。不設置對象動畫以外的狀態
forwards：設置對象狀態爲動畫結束時的狀態
backwards：設置對象狀態爲動畫開始時的狀態
both：設置對象狀態爲動畫結束或開始的狀態
一開始比較糾結着三個到底有什麼區別。網上也找了，發現網上說的有點錯誤。起碼我試了一下forwards和both的效果是如出一轍的。都是動畫運行完了停在哪裏就是哪裏。至於backwards，就是總停在一開始的狀態。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>delay</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 
 8 <style type="text/css">
 9     @-webkit-keyframes delay{
10         
11         100%{
12             -webkit-transform:translate(100px,0);
13         }
14        
15     }
16     .delay{
17 
18         width:100px;height:100px;
19         background-color: #000;
20         -webkit-animation:delay 1s linear 2 forwards alternate;
21     }
22 </style>
23 </head>
24 <body>
25     <div class="delay"></div>
26 </body>
27 </html>

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>delay</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 
 8 <style type="text/css">
 9     @-webkit-keyframes delay{
10         
11         100%{
12             -webkit-transform:translate(100px,0);
13         }
14        
15     }
16     .delay{
17 
18         width:100px;height:100px;
19         background-color: #000;
20         -webkit-animation:delay 1s linear 2 both alternate;
21     }
22 </style>
23 </head>
24 <body>
25     <div class="delay"></div>
26 </body>
27 </html>

兩段代碼主要說明在forwards和both的狀況下動畫在設置了反向運行偶次數時，效果仍然同樣。由於以前看到網上說的是forwards在偶次數反向是會停在關鍵幀的100%處，而不是0%處。java

iteration-count
運行次數。
這個原本沒什麼好說的，一目瞭然，可是無心中發現，有如下的特殊狀況：
不能爲負數
能夠爲0 爲0的時候，按1來算
能夠爲小數 小數的時候，不會取整。而是多少就運行多少，好比 .5 就運行到50%的位置。

事件

在動畫的世界裏，總有這樣的需求，就是某個動畫結束了以後才進行下一個動畫，這個時候就要知道上一個動畫是何時結束的了。雖然能夠用setTimeout來計時達到差很少的效果，可是總感受不夠精確。
還好，CSS3的動畫有js事件。
開始：animationstart
迭代：animationiteration
結束：animationend

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>delay</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 
 8 <style type="text/css">
 9     @-webkit-keyframes delay{
10         
11         100%{
12             -webkit-transform:translate(100px,0);
13         }
14        
15     }
16     .delay{
17 
18         width:100px;height:100px;
19         background-color: #000;
20         -webkit-animation:delay 1s linear 2 both alternate;
21     }
22 </style>
23 </head>
24 <body>
25     <div class="delay"></div>
26     <script type="text/javascript">
27     window.onload = function(){
28         var delay = document.getElementsByClassName('delay')[0],
29         time1,
30         time2;
31         delay.addEventListener('webkitAnimationStart',function(){
32             time1 = new Date().getTime();
33             time2 = time1;
34             console.log(time2-time1+'ms')
35             
36         })
37         delay.addEventListener('webkitAnimationIteration',function(){
38             time2 = new Date().getTime();
39             console.log(time2-time1+'ms')
40         })
41         delay.addEventListener('webkitAnimationEnd',function(){
42             time2 = new Date().getTime();
43             console.log(time2-time1+'ms')
44         })
45     }
46     </script>
47 </body>
48 </html>

從代碼能夠看出，iteration是在動畫重複執行的時候觸發的。web

相關標籤/搜索

android.support.v4.animation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。