過渡：
（1）只關心元素的初始狀態和結束狀態，不能獲取元素在過渡中每一幀的狀態。
（2）在元素首次渲染還沒有完成的情況下,不會觸發過渡
（3）在絕大部分變換樣式切換時,如果變換函式的位置個數不相同也不會觸發過渡
transition-property
指定過渡動畫的屬性
transition-duration
過渡時間，正值且必須帶單位（包括0）
transition-timing-function
過渡動畫的形式，預設值為ease
transition-delay
過渡延遲
transitionend
每個事件完成時都會觸發此事件
當屬性值的列表長度不一樣時
超出的情況會被裁剪
不夠的情況，關於時間的會重複列表
簡寫屬性推薦順序：
過渡時間，過渡樣式，過渡形式，延遲時間[，過渡時間，過渡樣式，延遲時間]
2.變換
（1）2d變換transform:允許你修改css視覺格式模式的座標空間，只對block級元素生效。
旋轉（rotate）
平移（translate）
傾斜（skew）
縮放（scale）
基點的變換：transform-origin :改變乙個元素變形的基點
矩陣matrix（需知道勾股定理，三角函式，角度與弧度的轉換）：旋轉,平移,傾斜,縮放.
變換組合時，方向從右向左，就是矩陣的計算
top,height，left,margin,padding,width 百分比參照於包含塊的高度
translate(-50%,-50%) 百分比參照於自身的高度
background-position 百分比參照於（區域-的位影象素值）的高度
（2）3d變換:旋轉,平移,縮放
景深perspective：肉眼到螢幕的距離。
寫法（2種）：
css屬性
transform屬性的乙個變換函式（必須是第一位）
作用：讓3d場景有近大遠小的效果，是乙個不可繼承屬性，但可作用於元素後代（不作用於本身）。
景深基點perspective-origin：視角的位置,預設值為50%。
景深疊加
滅點：景深越大，滅點越遠，元素變形越小。
transform-style：構建具有層級的3d舞台，作用於子元素。不可繼承。
backface-visibility
隱藏元素背面
乙個元素分兩面，元素沒有厚度。在乙個狀態下，元素只能展示自己的一面
！！百分比參照於誰？
元素垂直水平居中方案：
已知高寬：（偽**）
1.position=absolute,lrtb=0,margin=auto,包含塊一定的容器。
絕對定位盒模型的特性：margin為auto
left+right+width+padding+margin=包含塊寬度
top+bottom+height+padding+margin=包含塊高度
2.position=absolute,lt=50%,包含塊一定的是容器，margint/l為負的自身的一半
3.position=absolute,lt=50%,包含塊一定的是容器，transform:translate3d(-50%,-50%,0)
4.flex
未知高寬：
1. position=absolute,lt=50%,包含塊一定的是容器，transform:translate3d(-50%,-50%,0)
2.flex
img元素如何垂直水平居中：
1.基線
（3）3d動畫
動畫內的屬性：
animation-name：關鍵幀的名字
關鍵幀：
@keyframes animationname
}keyframes-selector可以是關鍵幀from(0%)到to()100%
百分比（時間的節點）
animation-duration乙個動畫週期的時長
animation-timing-function作用於動畫內的屬性（關鍵幀）
動畫外的屬性
animation-delay
只作用於動畫內的屬性（關鍵幀）
animation-iteration-count:迴圈關鍵幀的次數
animation-direction
animation-fill-mode：管理所有動畫外的狀態
animation-play-state：動畫的運動和靜止;
什麼是動畫外的狀態：
from之前
aniamtiojn-delay
to之後
值：none:動畫外的狀態保持在動畫之前的位置
backwards:from之前的狀態與from保持一致
forwards:to之前的狀態與to持一致
botn：backwards+forwards
CSS3屬性（過渡，2D變換，3D變換，動畫）
在css3中，我們如果不使用js 或者flash動畫，想要實現元素從a狀態變成b狀態，並且中間的過程可以被觀察到，那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...
3d變換 Css 筆記
transform rotate 45deg 中心旋轉45度 transform origin top center left right bottom 百分比 百分比時，第乙個值為從左到右，第二個值為從上到下 例 transform origin 100 50 表示的位置是乙個盒子的最右邊的中點 ...
CSS 動畫 3D翻頁動畫
doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...