簡述css3動畫

標籤：例子   cursor   .net   out   縮小   duration   div   元素   direction   

    簡單講一講CSS3的動畫屬性，transition，transform和animation

    

  一、transition 過渡

transition 是一個簡寫屬性，可擴充為

1.transition-property屬性，設定過渡效果的屬性名稱

  值可為：none（沒有屬性有效果）|| all（所有屬性有效果）|| property（自訂屬性名稱）

2.transition-duration屬性，設定效果期間

3.transition-timing-function屬性，設定效果的速度曲線

 

  值可為：

  linear，線性效果

  ease-in，先慢後快

  ease-out，先快後慢

  ease-in-out，先慢後快再慢

  cubic-bezier（n，n，n，n），某種速度函數

4.transition-delay屬性，設定順延強制效果的時間

 

  二、transform 變換

常見取值分為四塊，

  translate類（位移）

  scale類（放大縮小）

  rotate類（旋轉）

  skew類（展開） 

與之相關有一個屬性，transform-origin，允許你改變被轉換元素的屬性

 

transition 常與 transform 組合使用，例子

.image {      -webkit-transition: all 1s ease-in-out;      -moz-transition: all 1s ease-in-out;      -o-transition: all 1s ease-in-out;      transition: all 1s ease-in-out;      cursor:pointer;  }  .image_top {      position: absolute;      -webkit-transform: scale(0, 0);      opacity: 0;      filter: Alpha(opacity=0);  }  .box:hover .image_bottom{      -webkit-transform: scale(0, 0);      -webkit-transform-origin: bottom left;  }  

 

讓div擁有名為box的class屬性，裡面圖片擁有名為image和image_bottom的class屬性，則滑鼠移至該div，該圖片會向左下角縮小，並且透明，最後消失，滑鼠移走，圖片有會反向複原（向右上方放大，逐漸顯現）

 

注意：這裡ie低版本不支援opacity所以用filter相容（ie你懂得）

 

  三、animation 動畫

animation 也是一個簡述屬性，可拓展為

1.animation-name需要綁定到選取器keyframe的名字

2.animation-duration，動畫時間

3.animation-timing-function，動畫速度曲線，所填值與transition的該屬性相同

4.animation-delay，動畫順延強制

5.animation-iteration-count，動畫播放次數，值可為 n（次數）|| infinite（無限次）

6.animation-direction，是否反向播放，值為 normal（預設，正常播放）|| alternate（反向播放）

 

與之相關的有@keyframe屬性，簡單例子

.animation{       animation:mymove 5s infinite;      -webkit-animation:mymove 5s infinite;   }  @keyframes mymove  {    0%   {top:0px;}    25%  {top:200px;}    50%  {top:100px;}    75%  {top:200px;}    100% {top:0px;}  }  

 

 

簡述css3動畫