CSS3筆記 3 過渡效果 動畫 變形

語法

transition-duration

: time;

transition-property

: none | all | property;

transition-delay

: time;

transition-timing-function

: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier
(n,n,n,n)
;

transition

: transition-property transition-duration transition-timing-function transition-delay;

語法

animation-name

語法
animation-duration

語法
animation-timing-function

語法
animation-iteration-count

語法
animation-direction

語法
animation-play-state

語法
animation-delay

語法
animation-fill-mode

語法
animation

: animation-name animation-duration animation-timing-function animation-delay 
animation-iteration-count animation-direction animation-fill-mode animation-play-state;
transform屬性應用於元素的2d或3d變形。這個屬性允許將元素旋轉，縮放，移動，傾斜等。

2d變形可分為下列幾種：
3d變形可分為下列幾種：
語法
transform

transform-origin屬性可以設定變形時的基準點。預設基準點在元素中心，即對於2d，預設為(50%，50%)，對於3d，預設為(50%，50%，50%)。
語法
transform-origin

: x-axis y-axis z-axis;
perspective屬性用於設定視點距離，其與perspective()函式的區別： 語法

perspective

: number | none;
perspective-origin屬性可以設定透視基準點。預設基準點在元素中心，即為(50%，50%)。

語法
perspective-origin

: x-axis y-axis;
transform-style屬性指定巢狀元素是怎樣在三維空間中呈現。

語法
transform-style

: flat | preserve-3d;
backface-visibility屬性定義當元素背面向螢幕時是否可見。

語法
backface-visibility

: visible | hidden;
 
CSS3 變形與動畫效果
1.旋轉rotate 函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。如果這個值為正值，則元素相對原點中心順時針旋轉 如果這個值為負值，元素相對原點中心逆時針旋轉。transform rotate 20deg 2.扭曲skew 函式能夠讓...
CSS3動畫 過渡
css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...
CSS3 過渡 動畫
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容 應用於寬度屬性的過渡效果，時長為 2 秒 div 注釋 如果時長未規定，則不會有過渡效果，因為預設值是 0。效果開始於指定的 css 屬性改變值時。css 屬性改變的典型時間是滑鼠指標位於元素上時 規定當滑鼠指標懸...