CSS3 實現側邊欄展開收合動畫

最後更新：2018-06-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章主要介紹了如何使用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：規定對象動畫時間之外的狀態

側邊欄實現

/* 動畫定義 */@-webkit-keyframes move_right {    from {        opacity: 0;    }    to {        opacity: 1;        -webkit-transform: translateX(120px);        transform: translateX(120px);    }}@keyframes move_right {    from {        opacity: 0;    }    to {        opacity: 1;        -webkit-transform: translateX(120px);        transform: translateX(120px);    }}@-webkit-keyframes move_left {    from {        opacity: 1;    }    to {        opacity: 0;        -webkit-transform: translateX(-120px);        transform: translateX(-120px);    }}@keyframes move_left {    from {        opacity: 1;    }    to {        opacity: 0;        -webkit-transform: translateX(-120px);        transform: translateX(-120px);    }}@-webkit-keyframes move_up {    from {        opacity: 0;    }    to {        opacity: 1;        -webkit-transform: translateY(-250px);        transform: translateY(-250px);    }}@keyframes move_up {    from {        opacity: 0;    }    to {        opacity: 1;        -webkit-transform: translateY(-250px);        transform: translateY(-250px);    }}

/* 動畫綁定 */ .move_right {     -webkit-animation-name            : move_right;     animation-name            : move_right;     -webkit-animation-duration        : 1s;     animation-duration        : 1s;     -webkit-animation-iteration-count : 1;     animation-iteration-count : 1;     -webkit-animation-fill-mode : forwards;     animation-fill-mode : forwards; } .move_left {     -webkit-animation-name            : move_left;     animation-name            : move_left;     -webkit-animation-duration        : 1s;     animation-duration        : 1s;     -webkit-animation-iteration-count : 1;     animation-iteration-count : 1;     -webkit-animation-fill-mode : forwards;     animation-fill-mode : forwards; } .move_up {     -webkit-animation-name            : move_up;     animation-name            : move_up;     -webkit-animation-duration        : 1s;     animation-duration        : 1s;     -webkit-animation-iteration-count : 1;     animation-iteration-count : 1;     -webkit-animation-fill-mode : forwards;     animation-fill-mode : forwards; } .fadeIn {     -webkit-transform : translateX(120px);     transform : translateX(120px);      opacity: 1; } .fadeInUp {     -webkit-transform : translateY(-250px);     transform : translateY(-250px);     opacity: 1;     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;      transition :transform .2s ease-out, opacity .2s ease-out; } .fadeOutLeft {     -webkit-transform : translateX(-120px);     transform : translateX(-120px);      opacity: 0.0;     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;      transition :transform .2s ease-out, opacity .2s ease-out; }

html

<!doctype html> <html lang="en" class="fullHeight"> <head>     <meta charset="UTF-8">     <title>demo</title>     <link rel="stylesheet" type="text/css" href="sidebar.css"> </head> <body class="fullHeight">     <p class='sidebar fullHeight'>sidebar</p>     <p class="controller">         <p>             <button onclick="fadeIn()">淡進</button>             <button onclick="fadeOut()">淡出</button>         </p>         <p>             <button onclick="fadeInUp()">向上淡進</button>             <button onclick="fadeOutLeft()">向左淡出</button>         </p>     </p>     <script src="sidebarEffects.js"></script> </body> </html>

加入JS

<script> var sidebarEl = document.querySelector(".sidebar"); function fadeIn (e) {     sidebarEl.className = 'sidebar fullHeight';     sidebarEl.style.top = '0px';     sidebarEl.style.left = '0px';     sidebarEl.classList.add('move_right'); } function fadeOut (e) {     sidebarEl.className = 'sidebar fullHeight';     sidebarEl.style.left = '120px';     sidebarEl.classList.add('move_left'); } function fadeInUp(e) {     sidebarEl.className = 'sidebar fullHeight';     sidebarEl.style.top = '250px';     sidebarEl.style.left = '120px';     sidebarEl.classList.add('move_up'); } function fadeOutLeft(e) {     sidebarEl.className = 'sidebar fullHeight';     sidebarEl.style.top = '0px';     sidebarEl.style.left = '120px';     sidebarEl.classList.add('move_left'); } </script>

以上就是使用CSS3製作側邊欄動畫效果的全部內容和代碼了，小夥伴們根據自己的項目需求來改善美化下就可以了哦。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More