一、transform變換效果
CSS3 提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。
屬性有兩個：transform 和 transform-origin
對於 transform 的屬性值，具體如下表：
| 屬性值 | 說明 |
| none | 無變換 |
| translate(長度值或百分數值) translateX(長度值或百分數值) translatY(長度值或百分數值) |
在水平方向、垂直方向或兩個方向上平移 元素。 |
| scale(數值) scaleX(數值) scaleY(數值) |
在水平方向、垂直方向或兩個方向上縮放 元素 |
| rotate(角度) | 旋轉元素 |
| skew(角度) skewX(角度) skewY(角度) |
在水平方向、垂直方向或兩個方向上使元 素傾斜一定的角度 |
| matrix(4~6 數值，逗號隔開) | 指定自定義變換 |
//向水平和垂直各移動 200 像素，也可以使用百分比
transform: translate(200px,200px);
//向水平平移 200 像素，不加后面的 0 也可以
transform: translate(200px,0);
transform: translateX(200px);
//向垂直平移 200 像素
transform: translate(0,200px);
transform: translateY(200px);
//水平、垂直方向放大 1.5 倍
transform: scale(1.5);
transform: scale(1.5,1.5);
//水平、垂直方向縮小 0.8 倍
transform: scale(0.8,0.8);
//水平方向放大 1.5 倍
transform: scaleX(1.5);
//垂直方向放大 1.5 倍
transform: scaleY(1.5);
//旋轉元素，0 ~ 360 度之間，負值均可
transform: rotate(-45deg);
//傾斜元素，0 ~ 360 度之間，負值均可
transform: skew(45deg, 20deg);
//水平傾斜元素，0 ~ 360 度之間，負值均可
transform: skewX(45deg);
//垂直傾斜元素，0 ~ 360 度之間，負值均可
transform: skewY(45deg);
//通過六個數值指定矩形，其內部公式計算較為復雜，請百度吧
transform: matrix(1,0,0,1,30,30);
//不同的值可以累計，通過空格分割
transform: rotate(-45deg) scale(1.5);
二．transform-origin
transform-origin 屬性可以設置變換的起點。默認情況下，使用元素的中心作為起點。
具體設置方案參考如下表：
| 屬性值 | 說明 |
| 百分數值 | 指定元素 x 軸或 y 軸的起點 |
| 長度值 | 指定距離 |
| left center right |
指定 x 軸的位置 |
| top center bottom |
指定 y 軸的位置 |
這個屬性是用來改變變形的基准點的，默認是在元素的中心位置，如果你改變了基准點。
它就會按照這個基准點進行變形。
//默認值，以中心點變形
transform-origin: center center;
transform-origin: 50% 50%;
//以左上角為基准點變形
transform-origin: left top;
transform-origin: 0px 0px;
三．瀏覽器版本
CSS3 中的變形效果最低版本和需要前綴版本如下：
| Opera | Firefox | Chrome | Safari | IE | |
| 支持需帶前綴 | 11.5 ~ 22 | 3.5 ~ 15 | 4 ~ 35 | 3.1 ~ 8 | 9.0+ |
| 支持不帶前綴 | 23+ | 16+ | 26+ | 無 | 10.0+ |
//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
二、transition過渡效果
過渡效果一般是通過一些簡單的 CSS 動作觸發平滑過渡功能，比如：:hover、:focus、
:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能，主要屬性如
下表：
屬性 說明
transition-property 指定過渡或動態模擬的 CSS 屬性
transition-duration 指定完成過渡所需的時間
transition-timing-function 指定過渡的函數
transition-delay 指定過渡開始出現的延遲時間
transition 簡寫形式，按照上門四個屬性值連寫
我們先創建一個沒有過渡效果的元素，然后通過:hover 來觸發它。在沒有任何過渡效
果的觸發，會立即生硬的執行觸發。
//設置元素樣式
div {
width: 200px;
height: 200px;
background-color: white;
border:1px solid green;
}
//鼠標懸停后背景變黑，文字變白
div:hover {
background-color: black;
color: white;
margin-left: 50px;
}
二．transition-property
首先，設置過渡的第一個屬性就是指定過渡的屬性。同樣，你需要指定你要過渡某個元
素的兩套樣式用於用戶和頁面的交互。那么就使用 transition-property 屬性，詳細屬性
值如下表：
屬性值 說明
none 沒有指定任何樣式
all
默認值，指定元素所支持 transition-property 屬性
的樣式
指定樣式 指定支持 transition-property 的樣式
從上門的列表中來看，一般來說，none 用於本身有過渡樣式從而取消。而 all，則是
支持所有 transition-property 樣式，還有一種是指定 transition-property 中的某些
樣式。那么 transition-proerty 支持的樣式有哪些？如下表所示：
樣式名稱 樣式類型
background-color color(顏色)
background-image only gradients(漸變)
background-position percentage, length(百分比，長度值)
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number
//設置背景和文字顏色采用過渡效果
transition-property: background-color, color, margin-left;
三．transition-duration
如果單純設置過渡的樣式，還不能夠立刻實現效果。必須加上過渡所需的時間，因為默
認情況下過渡時間為 0。
//設置過渡時間為 1 秒鍾，如果是半秒鍾可以設置為.5s
transition-duration: 1s;
四．transition-timing-function
當過渡效果運行時，比如產生緩動效果。默認情況下的緩動是：元素樣式從初始狀態過
渡到終止狀態時速度由快到慢，逐漸變慢，即 ease。也是默認值，其他幾種緩動方式如下
表所示：
屬性值 說明
ease
默認值，元素樣式從初始狀態過渡到終止狀態時速度由
快到慢，逐漸變慢。等同於貝塞爾曲線(0.25, 0.1,
0.25, 1.0)
linear
元素樣式從初始狀態過渡到終止狀態速度是恆速。等同
於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease-in
元素樣式從初始狀態過渡到終止狀態時，速度越來越
快，呈一種加速狀態。等同於貝塞爾曲線(0.42, 0,
1.0, 1.0)
ease-out
元素樣式從初始狀態過渡到終止狀態時，速度越來越
慢，呈一種減速狀態。等同於貝塞爾曲線(0, 0, 0.58,
1.0)
ease-in-out
元素樣式從初始狀態過渡到終止狀態時，先加速，再減
速。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
//恆定速度
transition-timing-function: linear;
以上五種都是設定好的屬性值，我們也可以自定義這個緩動。使用 cubic-bezier()
屬性值，里面傳遞四個參數 p0,p1,p2,p3，值在 0~1 之間。
//自定義緩動
transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);
至於具體這些數值干什么的，怎么才可以精確得到相關的信息，這個要了解計算機圖形
學中的三次貝塞爾曲線的相關知識，類似與 photoshop 中的曲線調色。這里我們忽略。
還有一種不是平滑過渡，是跳躍式過渡，屬性值為：steps(n,type)。第一個值是一
個數值，表示跳躍幾次。第二個值是 start 或者 end，可選值。表示開始時跳躍，還是結
束時跳躍。
//跳躍 10 次至結束
transition-timing-function: steps(10,end);
五．transition-delay
這個屬性可以設置一個過渡延遲效果，就是效果在設置的延遲時間后再執行。使用
transition-delay 屬性值。如果有多個樣式效果，可以設置多個延遲時間，以空格隔開。
//設置延遲效果
transition-delay: 0s, 1s, 0s;
六．簡寫和版本
我可以直接使用 transition 來簡寫，有兩種形式的簡寫。第一種是，每個樣式單獨聲
明；第二種是不去考慮樣式，即使用 all 全部聲明。
//單獨聲明
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left
1s ease 0s;
//如果每個樣式都是統一的，直接使用 all
transition: all 1s ease 0s;
為了兼容舊版本，需要加上相應的瀏覽器前綴，版本信息如下表：
Opera Firefox Chrome Safari IE
支持需帶前綴 15 ~ 22 5 ~ 15 4 ~ 25 3.1 ~ 6 無
支持不帶前綴 23+ 16+ 26+ 6.1+ 10.0+
//兼容完整版
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
transition: all 1s ease 0s;
三、animation動畫效果
CSS3 提供了類似 Flash 關鍵幀控制的動畫效果，通過 animation 屬性實現。那么之
前的 transition 屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果，有一定的
局限性。
animation 實現動畫效果主要由兩個部分組成：
1.通過類似 Flash 動畫中的關鍵幀聲明一個動畫；
2.在 animation 屬性中調用關鍵幀聲明的動畫。
CSS3 提供的 animation 是一個復合屬性，它包含了很多子屬性。如下表所示：
屬性 說明
animation-name
用來指定一個關鍵幀動畫的名稱，這個動畫
名必須對應一個@keyframes 規則。CSS 加
載時會應用 animation-name 指定的動畫，
從而執行動畫。
animation-duration 用來設置動畫播放所需的時間
animation-timing-function 用來設置動畫的播放方式
animation-delay 用來指定動畫的延遲時間
animation-iteration-count 用來指定動畫播放的循環次數
animation-direction 用來指定動畫的播放方向
animation-play-state 用來控制動畫的播放狀態
animation-fill-mode 用來設置動畫的時間外屬性
animation 以上的簡寫形式
除了這 9 個屬性之外，動畫效果還有一個重要的屬性，就是關鍵幀屬性：@keyframes。
它的作用是聲明一個動畫，然后在 animation 調用關鍵幀聲明的動畫。
//基本格式，“name”可自定義
@keyframes name {
/*...*/
}
二．屬性詳解
在講解動畫屬性之前，先創建一個基本的樣式。
//一個 div 元素
<div>我是 HTML5</div>
//設置 CSS
div {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid green;
}
1.@keyframes
//創建動畫的第一步，先聲明一個動畫關鍵幀。
@keyframes myani {
0% {
background-color: white;
margin-left:0px;
}
50% {
background-color: black;
margin-left:100px;
}
100% {
background-color: white;
margin-left:0px;
}
}
//或者重復的，可以並列寫在一起
@keyframes myani {
0%, 100% {
background-color: white;
margin-left:0px;
}
50% {
background-color: black;
margin-left:100px;
}
}
2.animation-name
//調用@keyframes 動畫
animation-name: myani;
屬性值 說明
none 默認值，沒有指定任何動畫
INDEX 是由@keyframes 指定創建的動畫名稱
3.animation-duration
//設置動畫播放的時間
animation-duration: 1s;
當然，以上通過關鍵幀的方式，這里插入了三個關鍵幀。0%設置了白色和左偏移為 0，
和初始狀態一致，表明從這個地方開始動畫。50%設置了黑色，左偏移 100px。而 100%則
是最后一個設置，又回到了白色和左偏移為 0。整個動畫就一目了然了。
而對於關鍵幀的用法，大部分用百分比比較容易控制，當然，還有其他一些控制方法。
//從什么狀態過渡到什么狀態
@keyframes myani {
from {
background-color: white;
margin-left:0px;
}
to {
background-color: black;
margin-left:100px;
}
}
4.animation-timing-function
//設置緩動
animation-timing-function: ease-in;
屬性值 說明
ease
默認值，元素樣式從初始狀態過渡到終止狀態時速度由
快到慢，逐漸變慢。等同於貝塞爾曲線(0.25, 0.1,
0.25, 1.0)
linear
元素樣式從初始狀態過渡到終止狀態速度是恆速。等同
於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease-in
元素樣式從初始狀態過渡到終止狀態時，速度越來越
快，呈一種加速狀態。等同於貝塞爾曲線(0.42, 0,
1.0, 1.0)
ease-out
元素樣式從初始狀態過渡到終止狀態時，速度越來越
慢，呈一種減速狀態。等同於貝塞爾曲線(0, 0, 0.58,
1.0)
ease-in-out
元素樣式從初始狀態過渡到終止狀態時，先加速，再減
速。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier 自定義三次貝塞爾曲線
5.animation-delay
//設置延遲時間
animation-delay: 1s;
6.animation-iteration-count
//設置循環次數
animation-iteration-count: infinite;
屬性值 說明
次數 默認值為 1
infinite 表示無限次循環
7.animation-direction
//設置緩動方向交替
animation-direction: alternate;
屬性值 說明
normal 默認值，每次播放向前
alternate 一次向前，一次向后，一次向前，一次向后這樣交替
8.animation-play-state
//設置停止播放動畫
animation-play-state: paused;
9.animation-fill-mode
//設置結束后不在返回
animation-fill-mode: forwards;
屬性值 說明
none 默認值，表示按預期進行和結束
forwards 動畫結束后繼續應用最后關鍵幀位置，即不返回
backforwards 動畫結束后迅速應用起始關鍵幀位置，即返回
both 根據情況產生 forwards 或 backforwards 的效果
//both 需要結合，次數和播放方向
animation-iteration-count: 4;
animation-direction: alternate;
六．簡寫和版本
//簡寫形式完整版
animation: myani 1s ease 2 alternate 0s both;
為了兼容舊版本，需要加上相應的瀏覽器前綴，版本信息如下表：
Opera Firefox Chrome Safari IE
支持需帶前綴 15 ~ 29 5 ~ 15 4 ~ 42 4 ~ 8 無
支持不帶前綴 無 16+ 43+ 無 10.0+
//兼容完整版，Opera 在這個屬性上加入 webkit，所以沒有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both;
transition: all 1s ease 0s;
//@keyframes 也需要加上前綴
@-webkit-keyframes myani {...}
@-moz-keyframes myani {...}
@-o-keyframes myani {...}
@-ms-keyframes myani {...}
keyframes myani {...}