（一）CSS3動畫應用 - CSS3 實現側邊欄展開收起

本文轉載自查看原文 2014-11-29 09:04 7927 CSS3

@keyframes

規則用於創建動畫。

@keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果

@keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。

通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

規定動畫的名稱
規定動畫的時長

animation

animation 屬性是一個簡寫屬性，用於設置動畫屬性：

animation-name：規定 @keyframes 動畫的名稱。
animation-duration：規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function：規定動畫的速度曲線。默認是 "ease"。
animation-delay：規定動畫何時開始。默認是 0
animation-iteration-count：規定動畫被播放的次數。默認是 1。
animation-direction：規定動畫是否在下一周期逆向地播放。默認是 "normal"。
animation-fill-mode：規定對象動畫時間之外的狀態

側邊欄實現

 1 /* 動畫定義 */
 2 @-webkit-keyframes move_right {
 3     from {
 4         opacity: 0;
 5     }
 6     to {
 7         opacity: 1;
 8         -webkit-transform: translateX(120px);
 9         transform: translateX(120px);
10     }
11 }
12 @keyframes move_right {
13     from {
14         opacity: 0;
15     }
16     to {
17         opacity: 1;
18         -webkit-transform: translateX(120px);
19         transform: translateX(120px);
20     }
21 }
22 @-webkit-keyframes move_left {
23     from {
24         opacity: 1;
25     }
26     to {
27         opacity: 0;
28         -webkit-transform: translateX(-120px);
29         transform: translateX(-120px);
30     }
31 }
32 @keyframes move_left {
33     from {
34         opacity: 1;
35     }
36     to {
37         opacity: 0;
38         -webkit-transform: translateX(-120px);
39         transform: translateX(-120px);
40     }
41 }
42 @-webkit-keyframes move_up {
43     from {
44         opacity: 0;
45     }
46     to {
47         opacity: 1;
48         -webkit-transform: translateY(-250px);
49         transform: translateY(-250px);
50     }
51 }
52 @keyframes move_up {
53     from {
54         opacity: 0;
55     }
56     to {
57         opacity: 1;
58         -webkit-transform: translateY(-250px);
59         transform: translateY(-250px);
60     }
61 }

 1 /* 動畫綁定 */
 2 .move_right {
 3     -webkit-animation-name            : move_right;
 4     animation-name            : move_right;
 5     -webkit-animation-duration        : 1s;
 6     animation-duration        : 1s;
 7     -webkit-animation-iteration-count : 1;
 8     animation-iteration-count : 1;
 9     -webkit-animation-fill-mode : forwards;
10     animation-fill-mode : forwards;
11 }
12 .move_left {
13     -webkit-animation-name            : move_left;
14     animation-name            : move_left;
15     -webkit-animation-duration        : 1s;
16     animation-duration        : 1s;
17     -webkit-animation-iteration-count : 1;
18     animation-iteration-count : 1;
19     -webkit-animation-fill-mode : forwards;
20     animation-fill-mode : forwards;
21 }
22 .move_up {
23     -webkit-animation-name            : move_up;
24     animation-name            : move_up;
25     -webkit-animation-duration        : 1s;
26     animation-duration        : 1s;
27     -webkit-animation-iteration-count : 1;
28     animation-iteration-count : 1;
29     -webkit-animation-fill-mode : forwards;
30     animation-fill-mode : forwards;
31 }
32 .fadeIn {
33     -webkit-transform : translateX(120px);
34     transform : translateX(120px); 
35     opacity: 1;
36 }
37 .fadeInUp {
38     -webkit-transform : translateY(-250px);
39     transform : translateY(-250px);
40     opacity: 1;
41     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
42     transition :transform .2s ease-out, opacity .2s ease-out;
43 }
44 .fadeOutLeft {
45     -webkit-transform : translateX(-120px);
46     transform : translateX(-120px); 
47     opacity: 0.0;
48     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
49     transition :transform .2s ease-out, opacity .2s ease-out;
50 }

html

 1 <!doctype html>
 2 <html lang="en" class="fullHeight">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6     <link rel="stylesheet" type="text/css" href="sidebar.css">
 7 </head>
 8 <body class="fullHeight">
 9     <div class='sidebar fullHeight'>sidebar</div>
10     <div class="controller">
11         <div>
12             <button onclick="fadeIn()">淡進</button>
13             <button onclick="fadeOut()">淡出</button>
14         </div>
15         <div>
16             <button onclick="fadeInUp()">向上淡進</button>
17             <button onclick="fadeOutLeft()">向左淡出</button>
18         </div>
19     </div>
20     <script src="sidebarEffects.js"></script>
21 </body>
22 </html>

View Code

加入JS

 1 <script>
 2 var sidebarEl = document.querySelector(".sidebar");
 3 
 4 function fadeIn (e) {
 5     sidebarEl.className = 'sidebar fullHeight';
 6     sidebarEl.style.top = '0px';
 7     sidebarEl.style.left = '0px';
 8     sidebarEl.classList.add('move_right');
 9 }
10 function fadeOut (e) {
11     sidebarEl.className = 'sidebar fullHeight';
12     sidebarEl.style.left = '120px';
13     sidebarEl.classList.add('move_left');
14 }
15 function fadeInUp(e) {
16     sidebarEl.className = 'sidebar fullHeight';
17     sidebarEl.style.top = '250px';
18     sidebarEl.style.left = '120px';
19     sidebarEl.classList.add('move_up');
20 
21 }
22 function fadeOutLeft(e) {
23     sidebarEl.className = 'sidebar fullHeight';
24     sidebarEl.style.top = '0px';
25     sidebarEl.style.left = '120px';
26     sidebarEl.classList.add('move_left');
27 
28 }
29 </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Angular中調用css3動畫實現側邊欄的顯示與隱藏 css實現側邊展開收起 19款絢麗實用的jQuery/CSS3側邊欄菜單 JavaScript - 基於CSS3動畫的實現 css3實現開門動畫 [TimLinux] CSS 純CSS實現動畫展開/收起功能【HTML+CSS】實現側邊欄下拉菜單 7款純CSS3實現的炫酷動畫應用應用 CSS3 動畫實現12種風格的通知提示 vue實現動畫和css3動畫屬性

（一）CSS3動畫應用 - CSS3 實現 側邊欄展開收起