CSS3轉換過渡動畫

CSS3中有三個屬性：transform、transition、animation，一直容易搞混，今天特地拎出來理一理。

transform 轉換

transform 可以對元素進行移動、縮放、轉動、拉長或拉伸。transform 分爲2D轉換和3D轉換，因爲目前瀏覽器對3D轉換的支持度還很差，因此如下主要講解2D轉換。

2D轉換方法

• translate(x,y) 移動，參數爲像素值

  • translateX(n)
  • translateY(n)
• rotate(angle) 轉動，參數爲角度

• scale(x,y) 縮放，參數爲倍數

  • scaleX(n)
  • scaleY(n)

• skew(x-angle,y-angle) 傾斜，參數爲角度

  • skewX(angle)
  • skewY(angle)
• matrix() 參數爲六個值的矩陣，能夠描述以上全部轉換，用於複雜的轉換

transform-origin

另外，還有一個transform-origin屬性，用來改變被轉換元素的位置，通常和rotate()配合使用。

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg);         /* IE 9 */
-ms-transform-origin:20% 40%;         /* IE 9 */

-webkit-transform: rotate(45deg);    /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */

-moz-transform: rotate(45deg);        /* Firefox */
-moz-transform-origin:20% 40%;        /* Firefox */

-o-transform: rotate(45deg);        /* Opera */
-o-transform-origin:20% 40%;        /* Opera */
}

transform-origin的參數能夠爲：left、right、center、length、% 。

transition 過渡

該屬性和 :hover 配合使用，實現鼠標移入動畫效果。
要實現過渡，必須規定兩項內容：

• 規定您但願把效果添加到哪一個 CSS 屬性上
• 規定效果的時長

過渡屬性

屬性	描述
transition	簡寫屬性，在一個屬性中設置四個過渡屬性。
transition-property	規定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。
transition-delay	規定過渡效果什麼時候開始。默認是 0。

實例

div
{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

div:hover
{
width:200px;
}

animation 動畫

該屬性和 @keyframes 配合使用。

@keyframes

@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

@keyframes中也能夠用具體的百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

在 @keyframes 中建立動畫，把它捆綁到某個選擇器，不然不會產生動畫效果。
經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

• 規定動畫的名稱
• 規定動畫的時長

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

動畫屬性

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
animation-delay	規定動畫什麼時候開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode	規定對象動畫時間以外的狀態。