萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS3 實現側邊欄展開收起動畫

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制作側邊欄動畫效果的全部內容和代碼了,小伙伴們根據自己的項目需求來改善美化下就可以了哦。

copyright © 萬盛學電腦網 all rights reserved