摘要：我們可以設置多個關鍵幀通過百分比將動畫序列分割成多個節點在各節點中分別定義各屬性通過將動畫應用于相應元素樣式屬性動畫名稱持續時長默認是。播放方向測試播放完的狀態最后一個關鍵幀第一個關鍵幀測試播放狀態默認是。

CSS選擇器(基本、層級、屬性、偽類、偽狀態)
CSS常用樣式屬性
CSS3 過渡、變換、動畫
CSS3 3D場景搭建與應用

CSS選擇器一共有五種:基本、層級、屬性、偽類、偽元素 CSS選擇器參考手冊

通配符/全局選擇器 *

ID選擇器 #Id

class選擇器 .classname

元素選擇器 element

群組選擇器 element,element

后代選擇器 selecter selecter

子元素選擇器 selcter>selecter 所有子元素 測試

相鄰兄弟選擇器 selecter+selecter 就下面的一個 測試

通配兄弟選擇器 selecter1~selecter2 selecter1之后出現的所有selecter2 測試

selecter[attr] 包含attr屬性的元素 測試

selecter[attr=val] arrt屬性值是val的元素 測試

seldcter[attr^=val] attr屬性值是以val開頭的元素 測試

selecter[attr$=val] attr屬性值是以val結束的元素 測試

selecter[attr~=val] attr屬性值val 或 包含val（兩個值以空格隔開，其中一個是val) 測試

selecter[attr*=val] attr屬性值中包含val的元素,只要有這個字母就可以 測試

selecter[attr|=val] attr屬性值中帶有以val開頭的元素,val值必須是整個單詞 測試

1) 動態偽類選擇器

:link 未訪問的鏈接 測試

:visited 已訪問的鏈接

:hover 鼠標移動到鏈接上

:active 選定的鏈接

:focus 焦點 測試

提示:在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必須被置于 a:hover 之后，才是有效的。

2) 目標偽類選擇器

:target 選取當前活動的目標元素測試
URL 帶有后面跟有錨名稱 #，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)

3) 語言偽類選擇器

:lang 用于選取帶有以指定值開頭的 lang 屬性的元素 測試

4) UI元素偽類選擇器 （大多用在表單元素上）

:enabled 匹配已啟用的元素測試

:diabled 匹配被禁用的元素

:checked 匹配已被選中的input元素（只用于單選按鈕和復選框）測試

5) 結構偽類選擇器

:first-child 父元素中第一個子元素 測試

:last-child 父元素中最后一個子元素 測試

:first-of-type　父元素中第一個類型(等于:nth-of-type(1)) 測試

:last-of-type　 父元素中最后一個類型(等于:nth-last-of-type(1) 測試

:only-child　父元素中有唯一子元素 測試

:only-of-type 父元素中有唯一子類型測試

:nth-child(n) 父元素中第n個子元素 測試

:nth-last-child(n) 父元素中第n個子元素(從最后一個子元素開始計數) 測試

:nth-of-type(n)　父元素中第n個子類型　測試　　　　　　　　

:nth-last-of-type(n) 父元素中第n個子類型(從最后一個子類型開始計數)測試　　　　　　　

:empty 匹配空的元素(父元素中沒有有子元素和內容)測試

:root 匹配文檔根元素(在HTML中根元素始終是html元素)測試

6) 否定偽類選擇器

:not(selecter) 匹配非指定元素/選擇器的每個元素測試

::first-letter 選擇首字母 測試

::first-line 選擇首行 測試

::before 在元素之前添加內容，默認行內元素

::after 在元素之后添加內容，默認行內元素

::selection 匹配被用戶選取的內容(應用CSS 屬性：color,background,cursor,outline) 測試

::-webkit-input-placeholder 改變表單的默認樣式

偽類與偽元素的特性及其區別：

偽類本質上是為了彌補常規CSS選擇器的不足，以便獲取到更多信息；

偽元素本質上是創建了一個有內容的虛擬容器；

CSS3中偽類和偽元素的語法不同；

可以同時使用多個偽類，而只能同時使用一個偽元素，并且只能出現在最后；（a:first-child:hover ；p:hover::first-letter ）

內聯樣式(1000)>id選擇器(100)>類選擇器，屬性選擇器，偽類選擇器(10)>標簽選擇器、偽元素選擇器(1)

提高優先級的方法：使用!important關鍵字

css屬性參考手冊

寬度 width: 長度 | 百分比 | auto;

高度 height: 長度 | 百分比 | auto;

邊界 margin: 上 右 下 左 ;

填充 padding: 上 右 下 左 ;

定位 position: absolute | relative | static;

是否可見 visibility: inherit | visible | hidden;(會占據頁面上的空間)

類型 display: block| inline| inline-block|flex|none; flex圖片

溢出 overflow: visible | hidden | scroll auto;

浮動 float: left | right | none;清除浮動

陰影 box-shadow: h-shadow(水平陰影位置) v-shadow(垂直陰影位置) blur(模糊距離) spread(陰影尺寸) color(陰影顏色) inset|outset;陰影測試

顏色 color: 數值;

大小 font-size: 數值;

字體 font-family: 宋體,sans-serif;

樣式 font-style: italic;(斜體) normal;(正常)

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

行高 line-height :數值;

字間距 letter-spacing : 數值;

大小寫 text-transform: capitalize(首字大寫) | uppercase(英文大寫) | lowercase(英文小寫) | none;

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線)

排列 text-align: justify | left | right | center;

縮進 text-indent: 數值 | inherit;

陰影 text-shadow:數值;

顏色 background-color: 數值;

圖片 background-image: url() | none;

重復 background-repeat: no-repeat | repeat | repeat-x | repeat-y;

滾動 background-attachment: fixed | scroll;

尺寸 background-size:length|percentage|cover|contain;

位置 background-position:數值 | top | bottom | left | right | center;

簡寫 background:背景顏色 | 背景圖象 | 背景重復 | 背景附件 | 背景位置 ;

多值 background:url(a.jpg") no-repeat fixed center , url("a.jpg") no-repeat fixed top;
background-size:300px 300px,100px 100px;

樣式 border-style: solid;dotted;(點線) dashed;(虛線) double;(雙線) ;

寬度 border-width: 數值;

顏色 border-color: top值 right值 bottom值 left值;

簡寫 border: width style color;

類型 list-style-type: disc(實心圓形) | circle(空心圓形) | square(實心方形) | decimal(數字) |none;

位置 list-style-position: outside | inside;

圖像 list-style-image: URL;

簡寫 list-style:樣式類型 | 樣式位置 | url;

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

1) 移動translate:將元素從原來的位置移動到指定位置 測試

translate(x,y) 2D 轉換。

translate3d(x,y,z) 3D 轉換。

translateX(x) 用X軸的值轉換。

translateY(y) 用Y軸的值轉換。

translateZ(z) 3D轉換只是用Z軸的值。

2) 縮放scale:將元素根據中心原點進行縮放，測試

scale(x,y) 2D縮放轉換。

scale3d(x,y,z) 3D 縮放轉換。

scaleX(x) 設置X軸的值來縮放轉換。測試

scaleY(y) 設置Y軸的值來縮放轉換。測試

scaleZ(z) 設置Z軸的值來3D縮放轉換。

3) 旋轉rotate：指定需要進行旋轉的坐標軸, angle 表示旋轉角度

rotate(angle) 2D 旋轉 測試

rotate3d(x,y,z,angle) 3D 旋轉。

rotateX(angle) 沿著X軸的 3D 旋轉。測試

rotateY(angle) 沿著Y軸的 3D 旋轉。測試

rotateZ(angle) 沿著Z軸的 3D 旋轉。

4) 傾斜skew(x-angle,y-angle) 能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。skew圖片說明

skew(x-angle,y-angle) 沿著X和Y軸的2D傾斜轉換。測試

skewX(angle) 沿著X軸的2D傾斜轉換。 測試

skewY(angle) 沿著Y軸的2D傾斜轉換。測試

參與屬性 transition-property ：none|all| property(多個屬性名以逗號分隔)

持續時間 transition-duration：time(秒或毫秒)，默認是0

轉速曲線 transition-timing-function 測試
linear以相同速度開始至結束的過渡效果。
ease 慢速開始，然后變快，然后慢速結束的過渡效果
ease-in 以慢速開始的過渡效果
ease-out 以慢速結束的過渡效果
ease-in-out以慢速開始和結束的過渡效果
cubic-bezier(n,n,n,n)定義自己的值。可能的值是 0 至 1 之間的數值。

延遲時間 transition-delay：time(秒或毫秒)，默認是0

簡寫 transition: property duration timing-function delay;測試

可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果.測試

1)必要元素

通過@keyframes指定動畫序列；自動補間動畫，確定兩個點，系統會自動計算中間過程。這兩個點就稱為關鍵幀。我們可以設置多個關鍵幀

通過百分比將動畫序列分割成多個節點；

在各節點中分別定義各屬性

通過animation將動畫應用于相應元素；

2)animation樣式屬性

動畫名稱 animation-name：move

持續時長 animation-duration : 1s ;默認是 0。

播放速度 animation-timing-function: linear;默認是 "ease" 測試

延時時間 animation-delay: 1s; 默認是 0。注意：animation: move 3s linear 0 2 ;(不執行) =>animation: move 3s linear 0s 2 ;

播放次數 animation-iteration-count: n|infinite; 默認是 1。

播放方向 animation-direction: normal|reverse|alternate|alternate-reverse;測試

播放完的狀態 animation-fill-mode: none | forwards(最后一個關鍵幀) | backwards(第一個關鍵幀) | both;測試

播放狀態 animation-play-state: paused|running;默認是 "running"。測試

animation所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
簡寫animation: name duration timing-function delay iteration-count direction fill-mode; （默認值none 0 ease 0 1 normal none）

perspective: number|none; 3D元素距視圖的距離，以像素計
perspective-origin:50% 50% 3D元素所基于的X軸和Y軸。用來改變 3D 元素的底部位置。
當為元素定義 perspective,perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身

transform-style:preserve-3d; 設置3D,調整元素是在一個3維空間下
transform-origin:x(left/center/right/length/%) y(top/center/bottom/length/%) z(length); 調整旋轉中心 默認值為(50% 50% 0) 測試 用例-邊框設置0.5px
backface-visibility:visible|hidden; 當元素不面向屏幕時是否可見。測試

坐標系原點在左上角,x軸的正方向是向右,y軸正方向是向下,z軸正方向是從屏幕到人的眼睛(垂直)

CSS3實現3D開門動畫效果
圖片的旋轉木馬效果
CSS3 3D transform變換
張鑫旭博客