這篇文章主要介紹了如何使用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

demo

sidebar

淡進

淡出

向上淡進

向左淡出

加入JS

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');

}

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的收起 展开 循环 php,CSS3 实现侧边栏展开收起动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。