CSS3的過渡 動畫 轉換

2021-07-03 19:27:06 字數 2630 閱讀 8909

特別說明:以下屬性目前都需要加上各瀏覽器廠商字首,

瀏覽器                    廠商字首          瀏覽器核心

chrome、safari            -webkit-           blink、

webkit

opera                     -o-                blink

firefox                   -moz-              

gecko

ie                        -ms-              

trident

1)過渡

transition-property——指定應用過渡的屬性;

transition-duration——指定過渡的持續時間;

transition-timing-function——指定過渡期間計算中間值得方式(ease、linear、ease-in、ease-out、ease-in-out);

transition-delay——指定過渡開始之前的延遲時間;

transition——在一條宣告中指定所有過渡細節的簡寫屬性(按以上順序,部分可選);

2)動畫

animation-name——指定動畫名稱;

animation-timing-function——指定如何計算中間動畫值(ease、linear、ease-in、ease-out、ease-in-out);

animation-delay——設定動畫開始前的延遲時間;

animation——簡寫屬性(按以上順序,部分可選); 3)

轉換transform:translate(《長度值或百分數值》)——在x,y軸兩個方向上平移元素;

transform:translate3d(x,y,z)——在x,y,z軸兩個方向上平移元素(3d轉換);

transform:translatex(《長度值或百分數值》)——在x軸方向上平移元素;

transform:translatey(《長度值或百分數值》)——

在y軸方向上平移元素;

transform:translatez(《長度值或百分數值》

)——在z軸方向上平移元素(3d轉換);

transform:scale(《數值》)——

在x,y軸兩個方向上縮放元素;

transform:scale3d(x,y,z)——

在x,y,z軸三個方向上縮放元素(3d轉換);

transform:scalex(《數值》)——

在x軸方向上縮放元素;

transform:scaley(《數值》)——

在y軸方向上縮放元素;

transform:scalez(《數值》)——

在z軸方向上縮放元素(3d轉換);

transform:rotate(《角度》)——

旋轉元素;

transform:rotate3d(x,y,z,angle)——

旋轉元素(3d轉換);

transform:skew(《角度》)——

在x,y軸兩個方向上使元素傾斜一定的角度;

transform:skewx(《角度》)——在x軸方向上使元素傾斜一定的角度;

transform:

skewy(《角度》)——在y軸方向上使元素傾斜一定的角度;

transform:matrix(4~6個數值)——指定自定義轉換,使用六個值的矩陣;

transform:matrix3d(12~16個值)——指定自定義轉換,使用 16 個值的 4x4 矩陣(3d轉換);

transform-origin——指定轉換的起點(%/長度值/left/center/right,%/長度值/top/center/bottom);

transform-style——

規定被巢狀元素如何在 3d 空間中顯示

(3d轉換)

;perspective(n)——定義 3d 轉換元素的透視檢視(3d轉換);

perspective-origin——規定 3d 元素的底部位置(3d轉換);

backface-visibility——定義元素在不面對螢幕時是否可見(3d轉換);

遠地本著「構築誠信,永續發展」的理念為客戶提供專業的理財服務、財富管理以及產品方案推薦。

遠地都進來看看撒將通過自身的專業優勢和有效的資訊交流平台,為資金富裕方和資金需求方打造乙個專業,誠信,共贏,睿智的服務平台,

幫助客戶實現穩定、安全的財富增值,幫助更多優秀的中小型企業融資成功。

running

paused

補充說明:一句話概括transform,transition,animation區別

transform:對元素進行變形;

transition:對元素某個屬性或多個屬性的變化,進行控制(時間等),類似flash的補間動畫。但只有兩個關鍵貞。開始,結束。

animation:對元素某個屬性或多個屬性的變化,進行控制(時間等),類似flash的補間動畫。可以設定多個關鍵貞。

transition需要觸發乙個事件 ,

而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元 素css的屬性值,從而達到一種動畫的效果。

CSS3動畫 過渡

css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...

CSS3 過渡 動畫

css3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點,必須規定兩項內容 應用於寬度屬性的過渡效果,時長為 2 秒 div 注釋 如果時長未規定,則不會有過渡效果,因為預設值是 0。效果開始於指定的 css 屬性改變值時。css 屬性改變的典型時間是滑鼠指標位於元素上時 規定當滑鼠指標懸...

CSS3轉換過渡動畫

css3中有三個屬性 transform transition animation,一直容易搞混,今天特意拎出來理一理。transform 能夠對元素進行移動 縮放 轉動 拉長或拉伸。transform 分為2d轉換和3d轉換,由於目前瀏覽器對3d轉換的支援度還不好,所以以下主要講解2d轉換。rot...