CSS3屬性（過渡，2D變換，3D變換，動畫）

在css3中，我們如果不使用js**，或者flash動畫，想要實現元素從a狀態變成b狀態，並且中間的過程可以被觀察到，那麼可以使用過渡屬性：transitiont

ease ： 由快到慢(預設值)

linear： 勻速運動

ease-in： 加速運動

ease-out： 減速運動

ease-in-out：先加速後減速

div

div

//宣告動畫語法

@keyframes 動畫名稱 
to }//假設元素div要呼叫動畫
//呼叫動畫語法
div

描述@keyframes

定義動畫

animation-name

規定 @keyframes 動畫的名稱。

animation-duration

規定動畫完成乙個週期所花費的時間。

animation-timing-function

規定動畫的速度曲線。預設是 「ease」。

屬animation-delay性

規定動畫何時開始。預設是 0。

animation-iteration-count

animation-direction

nimation-play-state

規定動畫是否正在執行或暫停。預設是 「running」。還有「paused」

animation-fill-mode

規定動畫結束後狀態，保持 forwards 回到起始 backwards

animation

所有動畫屬性的簡寫屬性

//除了上面的使用from以及to關鍵字來宣告動畫之外，還有一種方式，可以將動畫分割為若干個節點。

@keyframes 動畫名稱 
50% 
100% 
}//呼叫動畫的方式與之前相同。

CSS3過渡和2D屬性

一 過渡屬性 1.transition property 檢索或設定物件中的參與過渡的屬性說明 屬性值可以單獨設定否個屬性，也可以設定多個屬性 width，height 還可以設定為all 預設值 代表所有屬性 2.transition duration 檢索或設定物件過渡的持續時間說明 單位 s,...

CSS3新增2D和3D屬性

3d變形 css3 transform translatex x transform是css3中具有顛覆性的特徵之一，可以實現元素的位移 旋轉 傾斜 縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。變形轉換 transform transfor...

CSS3漸變 過渡 2d變換

寫法 一 background gradient linear,起點 水平 垂直 終點，color stop 開始漸變的位置，顏色 注 color stop 開始漸變的位置，顏色 後面可以連著寫多個值。寫法 二 background webkit linear gradient 方向 角度 deg ...