css3動畫整理

2022-07-25 20:39:08 字數 3148 閱讀 2749

css3動畫主要常用的屬性有 變形(transform),轉換(transition),動畫(animation)三種。

變形(transform)主要有以下幾種方式:

旋轉rotate:rotate(()   transform:rotate(20deg);

扭曲skew:skew(x,y)  transform:skew(30deg,10deg):

縮放scale:scale(x,y)  transform:scale(30deg,10deg):

移動translate :translate(x,y)  transform:translate(100px,0)

矩陣變形matrix:matrix(, , , , , ) 

改變元素的基點位置transform-origin:transform-origin(x,y)  用來設定元素的運動的基點(參照點)。預設點是元素的中心點。其中x和y的值可以是百分值,em,px,其中x也可以是字元引數值 left,center,right;y和x一樣除了百分值外還可以設定字元值top,center,bottom(transform-origin並不是transform中的屬性值,他具有自己的語法)

transform語法:

transform: none|transform-functions;

例:

div

詳細屬性介紹:

轉換(transition):css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發,並圓滑地以動畫效果改變css的屬性值。」

transition主要包含四個屬性值:

執行變換的屬性:transition-property,

變換的速率變化transition-timing-function,

變換延遲時間transition-delay。

語法:

transition: property duration timing-function delay;

例:

div

.div1

詳細屬性介紹:

動畫(animation):css3的animation是由「keyframes」這個屬性來實現效果的,"keyframes",類似於「關鍵幀",keyframes具有其自己的語法規則,他的命名是由"@keyframes"開頭,後面緊接著是這個「動畫的名稱」加上一對花括號「{}」。

keyframes 案例:

@keyframes myfirst

to }

或@keyframes myfirst

50%

100%

}

建立好動畫後使用時需要繫結到選擇器上,這樣才會有效果,那下面就用到了animation:

例:

div

animation主要包含以下幾個屬性:

用來定義乙個動畫的名稱:animation-name,

1、ease:(逐漸變慢)預設值

2、linear:(勻速)

3、ease-in:(加速)

4、ease-out:(減速)

5、ease-in-out:(加速然後減速)

6、cubic-bezier:(該值允許你去自定義乙個時間曲線), 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於麴線上點p1和點p2。所有值需在[0, 1]區域內,                    否則無效。

引數有以下幾種:

引數有以下幾種

語法:

animation:name,duration,timing-function,delay,iteration-count,direction,play-state

詳細屬性介紹:

shake

flash

swing

bounce

tada

wobble

pulse

flip

flipinx

flipoutx

flipiny

flipouty

fadein

fadeinup

fadeindown

fadeinleft

fadeinright

fadeinupbig

fadeindownbig

fadeinleftbig

fadeinrightbig

fadeout

fadeoutup

fadeoutdown

fadeoutleft

fadeoutright

fadeoutupbig

fadeoutdownbig

fadeoutleftbig

fadeoutrightbig

slideindown

slideinleft

slideinright

slideoutup

slideoutleft

slideoutright

bouncein

bounceindown

bounceinup

bounceinleft

bounceinright

bounceout

bounceoutdown

bounceoutup

bounceoutleft

bounceoutright

rotatein

rotateindownleft

rotateindownright

rotateinupleft

rotateinupright

rotateout

rotateoutdownleft

rotateoutdownright

rotateoutupleft

rotateoutupright

lightspeedin

lightspeedout

hinge

rollin

rollout

參考:

css3動畫屬性整理

transition允許css屬性值在一定時間內可以平滑地過渡。其主要包括四個屬性值 這裡需要注意一下幾點 transition需要事件觸發,不可以在網頁載入時自動發生 transition是一次性的,不能重 生,除非是一再觸發 box 複製 animation動畫,其可以不需要事件觸發就可以進行,...

CSS3動畫屬性 animation整理

呼叫動畫 animation duration time 取值 為數值,單位為s 秒.其預設值為 0 這個屬性跟transition中的transition duration使用方法是一樣的。animation timing function linear ease ease in ease out...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性,但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...