這篇文章主要介紹了怎么使用CSS3實(shí)現(xiàn)側(cè)邊欄展開收起動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、良慶網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

@keyframes

規(guī)則用于創(chuàng)建動(dòng)畫。

@keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果

@keyframes 中創(chuàng)建動(dòng)畫時(shí)，請(qǐng)把它捆綁到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫效果。

通過規(guī)定至少以下兩項(xiàng) CSS3 動(dòng)畫屬性，即可將動(dòng)畫綁定到選擇器：

      規(guī)定動(dòng)畫的名稱
      規(guī)定動(dòng)畫的時(shí)長(zhǎng)

animation

animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置動(dòng)畫屬性：

animation-name：規(guī)定 @keyframes 動(dòng)畫的名稱。
animation-duration：規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。
animation-timing-function：規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。
animation-delay：規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0
animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。
animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。
animation-fill-mode：規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)

側(cè)邊欄實(shí)現(xiàn)

代碼如下:

/* 動(dòng)畫定義 */
@-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);
}
}

復(fù)制代碼

代碼如下:

/* 動(dòng)畫綁定 */
.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

復(fù)制代碼

代碼如下:

加入JS

復(fù)制代碼

代碼如下:

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用CSS3實(shí)現(xiàn)側(cè)邊欄展開收起動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!