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

 　　規則用於建立動畫。

　　@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

　　代碼如下:

　　sidebar

　　淡進

　　淡出

　　向上淡進

　　向左淡出

　　加入JS

　　代碼如下:

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