transform、transition 和 animation區別

CSS3中和動畫有關的屬性有三個 transform、transition 和 animation。下面來一一說明:

 

     transform  

 

從字面來看transform的釋義爲改變，使…變形；轉換 。這裏咱們就能夠理解爲變形。那都能怎麼變呢？

none 表示不進行變換；

rotate 旋轉            transform:rotate(20deg) 旋轉角度能夠爲負數。須要先有transform-origin定義旋轉的基點可爲left top center right bottom 或座標值（50px 70px）。

skew  扭曲             transform:skew(30deg,30deg)  skew(相對x軸傾斜,相對y軸傾斜)

scale  縮放             transform:scale(2,3) 橫向放大2倍，縱向放大3倍。如等比放大寫一個參數便可。

translate 移動        transform:translate(50px, 50px);

matrix 矩陣變形     基本語法transform: matrix(a, c, b, d, tx, ty);其中a, c, b, d是一個二維矩陣:

 

   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘

a:X軸縮放比例 b:Y軸傾斜 c:Y軸縮放比例 d:X軸傾斜

 tx, ty就是就是基於X和Y 座標從新定位元素。其實就是translate （tx,ty）



 Transition  
W3C標準中對CSS3的transition這是樣描述的:「CSS的transition容許CSS的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。

transition主要包含四個屬性值：transition-property： 執行變換的屬性；

transition- duration：      變換延續的時間：

transition-timing-function：    在延續時間段，變換的速率變化；

transition- delay ：變換延遲時間

下面一一說明這四個屬性：

transition-property

語法：

transition-property ： none | all | [ <IDENT> ]

transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其 主要有如下幾個值：none(沒有屬 性改 變)；all（全部屬性改變）這個也是其默認值；indent（元素屬性名）；當其值爲none時，transition立刻中止執行，當指定爲all 時，則元素產生任何屬性值變化時都將執行transition效果，ident是能夠指定元素的某一個屬性值。其對應的類型以下：

一、color： 經過紅、綠、藍和透明度組件變換（每一個數值單獨處理），如：background-color，border-color，color，outline-color等CSS屬性；

二、length：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；

三、percentage：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；

四、integer 離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換爲整數時發生，如：outline-offset，z-index等屬性；

五、number真實的（浮點型）數值，如：zoom，opacity，font-weight等屬性；

六、transform list：詳情請參閱：《CSS3 Transform》。

七、rectangle：經過x、 y、 width和height（轉爲數值）變換，如：crop；

八、visibility：離散步驟，在0到1數字範圍以內，0表示「隱藏」，1表示徹底「顯示」,如：visibility；

九、shadow：做用於color、x、y、和blur（模糊）屬性，如：text-shadow；

十、gradient：經過每次中止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的中止數值以便執行動畫，如：background-image；

十一、paint server (SVG)：只支持下面的狀況：從gradient到gradient以及color到color，而後工做與上面相似；

十二、space-separated list of above：若是列表有相同的項目數值，則列表每一項按照上面的規則進行變化，不然無變化；

1三、a shorthand property：若是縮寫的全部部分均可以實現動畫，則會像全部單個屬性變化同樣變化。

支持執行transition效果的屬性：

Property Name	Type
background-color	as color
background-position	as repeatable list of simple list of length, percentage, or calc
border-bottom-color	as color
border-bottom-width	as length
border-left-color	as color
border-left-width	as length
border-right-color	as color
border-right-width	as length
border-spacing	as simple list of length
border-top-color	as color
border-top-width	as length
bottom	as length, percentage, or calc
clip	as rectangle
color	as color
font-size	as length
font-weight	as font weight
height	as length, percentage, or calc
left	as length, percentage, or calc
letter-spacing	as length
line-height	as either number or length
margin-bottom	as length
margin-left	as length
margin-right	as length
margin-top	as length
max-height	as length, percentage, or calc
max-width	as length, percentage, or calc
min-height	as length, percentage, or calc
min-width	as length, percentage, or calc
opacity	as number
outline-color	as color
outline-width	as length
padding-bottom	as length
padding-left	as length
padding-right	as length
padding-top	as length
right	as length, percentage, or calc
text-indent	as length, percentage, or calc
text-shadow	as shadow list
top	as length, percentage, or calc
vertical-align	as length
visibility	as visibility
width	as length, percentage, or calc
word-spacing	as length
z-index	as integer

 

transition-duration

transition-duration是用來指定元素 轉換過程的持續時間，取值：<time>爲數值，單位爲s（秒）,能夠做用於全部元素，包括:before和:after僞元素。其默認值是0，也就是變換時是即時的。

 

transition-timing-function

  取值：

transition-timing-function的值容許你根據時間的推動去改變屬性值的變換速率，transition-timing-function有6個可能值：

一、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；

二、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；

三、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)；

四、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0)；

五、ease-in-out：（加速而後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)；

六、cubic-bezier：（該值容許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效。

其是cubic-bezier爲經過貝賽爾曲線來計算「轉換」過程當中的屬性值，以下曲線所示，經過改變P1(x1, y1)和P2(x2, y2)的座標能夠改變整個過程的Output Percentage。初始默認值爲default。

transition-delay

  transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，取 值：<time>爲數值，單位爲s（秒），它的使用和transition-duration極其類似，也能夠做用於全部元素，包 括:before和:after僞元素。 默認大小是」0″，也就是變換當即執行，沒有延遲。

有時咱們不僅改變一個CSS效果的屬性,而是想改變兩個或者多個CSS屬性的transition效果，那麼咱們只要把幾個transition的 聲明串 在一塊兒，用逗號（「，」）隔開，而後各自能夠有各自不一樣的延續時間和其時間的速率變換方式。但須要值得注意的一點：transition-delay與 transition-duration的值都是時間，因此要區分它們在連寫中的位置，通常瀏覽器會根據前後順序決定，第一個能夠解析爲時間的怭值爲 transition-duration第二個爲transition-delay。如：

   a {transition: background 0.5s ease-in,color 0.3s ease-out}

若是你想給元素執行全部transition效果的屬性，那麼咱們還能夠利用all屬性值來操做，此時他們共享一樣的延續時間以及速率變換方式，如：

a{transition: all 0.5s ease-in}

}

 

 animation  

顧名思義爲動畫的意思。Animation應用在頁面DOM上 使其產生動畫的效果。在開始介紹Animation以前咱們有必要先來了解一個特殊的東西，那就是"Keyframes",咱們把他叫作「關鍵幀」，玩過flash的朋友可能對這個東西並不會陌生。

一個官網的示例：

@-webkit-keyframes 'wobble' {
     0% {
        margin-left: 100px;
        background: green;
     }
     40% {
        margin-left: 150px;
        background: orange;
     }
     60% {
        margin-left: 75px;
        background: blue;
     }
     100% {
        margin-left: 100px;
        background: red;
     }
  }

這裏咱們定義了一個叫「wobble」的動畫，名字任意取。分幾個階段0% 40% 60% 100% 來過渡。

keyframes定義好了之後，就能夠去調用定義好的動畫「wobble」了。

下面咱們來看看怎麼給一個元素調用animation屬性

  .demo1 {
     width: 50px;
     height: 50px;
     margin-left: 100px;
     background: blue;
     -webkit-animation-name:'wobble';/*動畫屬性名，也就是咱們前面keyframes定義的動畫名*/
     -webkit-animation-duration: 10s;/*動畫持續時間*/
     -webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是同樣的*/
     -webkit-animation-delay: 2s;/*動畫延遲時間*/
     -webkit-animation-iteration-count: 10;/*定義循環資料，infinite爲無限次*/
     -webkit-animation-direction: alternate;/*定義動畫方式*/
  }

animation-name:

animation-name:是用來定義一個動畫的名稱，爲Keyframes中的名稱，不然不會有動畫效果。none爲默認值，當值爲none時，將沒有任何動畫效果。另外咱們這個屬性跟前面所講的transition同樣，咱們能夠同時附幾個animation給一個元素，咱們只須要用逗號「，」隔開。

 

CSS3的animation相似於transition屬性，他們都是隨着時間改變元素的屬性值。他們主要區別是transition須要觸發一 個事件(hover事件或click事件等)纔會隨時間改變其css屬性；而animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來 改變元素css的屬性值，從而達到一種動畫的效果。這樣咱們就能夠直接在一個元素中調用animation的動畫屬性,基於這一點，css3的 animation就須要明確的動畫屬性值，這也就是回到咱們上面所說的，咱們須要keyframes來定義不一樣時間的css屬性值,達到元素在不一樣時間 段變化的效果。

 

 

 

轉：http://www.7755.me/Article/CSS3/39/