動畫實訓報告個人總結，CSS3動畫總結-變量-匯編語言學習筆記

動畫實訓報告個人總結，CSS3動畫總結

2023-12-06 阅读 25 评论 0

摘要：因為在工作的時候，難免會忘記一些東西，所以做一個總結，方便查詢。 0.常用特效/變換（transform） ?scale（2D縮放）?rotate（2D旋轉）?translate（2D位移）?skew（2D傾斜）? 1.keyframes這

因為在工作的時候，難免會忘記一些東西，所以做一個總結，方便查詢。

0.常用特效/變換（transform）

?scale（2D縮放）
?rotate（2D旋轉）
?translate（2D位移）
?skew（2D傾斜）

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

 1 @keyframes zoomIn {
 2     0%{ transform: scale(0);}
 3     60%{ transform: scale(1.1);}
 4     100% { transform: scale(1);}
 5 }
 6 @-moz-keyframes zoomIn {
 7     0%{ transform: scale(0);}
 8     60% { transform: scale(1.1);}
 9     100% { transform: scale(1);}
10 }
11 @-webkit-keyframes zoomIn {
12     0%{ -webkit-transform: scale(0);}
13     60% { -webkit-transform: scale(1.1);}
14     100% { -webkit-transform: scale(1);}
15 }
16 @-o-keyframes zoomIn {
17     0%{ -o-transform: scale(0);}
18     90% { -o-transform: scale(1.1);}
19     100% { -o-transform: scale(1);}
20 }
21 @-ms-keyframes zoomIn{
22     0%{ -ms-transform: scale(0);}
23     60% { -ms-transform: scale(1.1);}
24     100% { -ms-transform: scale(1);}
25 }

2.animation的屬性

動畫實訓報告個人總結。

語法


3.animation-fill-mode 填充模式
該屬性有四個值
none：默認值。不設置對象動畫之外的狀態
forwards：設置對象狀態為動畫結束時的狀態（觸發之前）
backwards：設置對象狀態為動畫開始時的狀態（觸發之后）
both：設置對象狀態為動畫結束或開始的狀態（）
◇注意 這個東西只能在animation之后添加

4.事件

在動畫的世界里，總有這樣的需求，就是某個動畫結束了之后才進行下一個動畫，這個時候就要知道上一個動畫是什么時候結束的了。雖然可以用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>

轉載于:https://www.cnblogs.com/it-Ren/p/11105046.html

原文链接：https://hbdhgg.com/2/190454.html

发表评论: