CSS3 實現(xiàn)側(cè)邊欄展開收起動畫

發(fā)布時間：2014-12-22 11:47:35 作者：佚名

我要評論

這篇文章主要介紹了如何使用CSS3 實現(xiàn)側(cè)邊欄展開收起動畫，并附上了示例代碼，非常的詳細(xì)，推薦給需要的小伙伴。

@keyframes

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

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

@keyframes 中創(chuàng)建動畫時，請把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果。

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

規(guī)定動畫的名稱
規(guī)定動畫的時長

animation

animation 屬性是一個簡寫屬性，用于設(shè)置動畫屬性：

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

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

復(fù)制代碼

代碼如下:

/* 動畫定義 */
@-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ù)制代碼

代碼如下:

/* 動畫綁定 */
.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ù)制代碼

代碼如下:

<!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">
<div class='sidebar fullHeight'>sidebar</div>
<div class="controller">
<div>
<button onclick="fadeIn()">淡進(jìn)</button>
<button onclick="fadeOut()">淡出</button>
</div>
<div>
<button onclick="fadeInUp()">向上淡進(jìn)</button>
<button onclick="fadeOutLeft()">向左淡出</button>
</div>
</div>
<script src="sidebarEffects.js"></script>
</body>
</html>

加入JS

復(fù)制代碼

代碼如下: