過渡
transition 屬性
參考：
支持：
nternet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。
Safari 需要前綴 -webkit-。
Internet Explorer 9 以及更早的版本，不支持 transition 屬性。
Chrome 25 以及更早的版本，需要前綴 -webkit-。
| 屬性 | 描述 |
|---|---|
| transition | 簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。 |
| transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 |
| transition-duration | 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 |
| transition-timing-function | 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 |
| transition-delay | 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。 |
圖形變換
參考：
transform 屬性
支持：
Internet Explorer 10、Firefox 以及 Opera 支持 transform 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
Internet Explorer 9 需要前綴 -ms-。
2D轉(zhuǎn)換
方法：
-
translate(left, top)相對當(dāng)前位置移動(dòng) -
rotate(30deg)順時(shí)針旋轉(zhuǎn)，可為負(fù)值 -
scale(x, y)尺寸擴(kuò)大倍數(shù) -
skew(30deg, 20deg)繞X軸、Y軸翻轉(zhuǎn) -
matrix()把所有 2D 轉(zhuǎn)換方法組合在一起。需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。示例
| 屬性 | 描述 |
|---|---|
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 |
| transform-origin | 允許你改變被轉(zhuǎn)換元素的位置。 |
3D轉(zhuǎn)換
方法：
-
rotateX(120deg)繞X軸旋轉(zhuǎn) -
rotateY(120deg)繞Y軸旋轉(zhuǎn)
其他方法：
| 函數(shù) | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。 |
| translate3d(x,y,z) | 定義 3D 轉(zhuǎn)化。 |
| translateX(x) | 定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。 |
| translateY(y) | 定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。 |
| scale3d(x,y,z) | 定義 3D 縮放轉(zhuǎn)換。 |
| scaleX(x) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) X 軸的值。 |
| scaleY(y) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Y 軸的值。 |
| scaleZ(z) | 定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Z 軸的值。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉(zhuǎn)。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉(zhuǎn)。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉(zhuǎn)。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉(zhuǎn)。 |
| perspective(n) | 定義 3D 轉(zhuǎn)換元素的透視視圖。 |
| 屬性 | 描述 |
|---|---|
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 |
| transform-origin | 允許你改變被轉(zhuǎn)換元素的位置。 |
| transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示。 |
| perspective | 規(guī)定 3D 元素的透視效果。 |
| perspective-origin | 規(guī)定 3D 元素的底部位置。 |
| backface-visibility | 定義元素在不面對屏幕時(shí)是否可見。 |
動(dòng)畫
animation 屬性與 keyframe 規(guī)則
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
在一個(gè)動(dòng)畫中添加多個(gè) 改變多個(gè)樣式的 keyframe 選擇器：
示例
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
