css3 tansform transiton animation

 

************

◆Margin屬性：

適合對象:全部元素
是否繼承:no
百分比備註:相對於BOX的寬度

 

 

2D Transform 方法

實例

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }

 

 

函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿着 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿着 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿着 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿着 Y 軸。

 

 

3D Transform 方法

實例

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);	/* Firefox */ }

 

函數	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)	定義 3D 轉化。
translateX(x)	定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y)	定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z)	定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	定義 3D 縮放轉換，經過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉換，經過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉換，經過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
perspective(n)	定義 3D 轉換元素的透視視圖。

 

 

Transition過渡屬性

 

下面的表格列出了全部的轉換屬性：

 

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

 

 

 

實例

 

應用於寬度屬性的過渡效果，時長爲 2 秒：

 

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ } 

 

註釋：若是時長未規定，則不會有過渡效果，由於默認值是 0。

 

效果開始於指定的 CSS 屬性改變值時。CSS 屬性改變的典型時間是鼠標指針位於元素上時：

 

實例

 

規定當鼠標指針懸浮於 <div> 元素上時：

 

div:hover
{
width:300px;
}

 

 

CSS3 Animation動畫屬性

 

下面的表格列出了 @keyframes 規則和全部動畫屬性：

 

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

 

下面的兩個例子設置了全部動畫屬性：

 

實例

 

 

 

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

 

 

@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;} }