CSS3新增屬性

1、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;

2、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;

3、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 {...}