CSS3的 keyframes用法詳解

css3的@keyframes用法詳解:

此屬性與animation屬性是密切相關的，關於animation屬性可以參閱css3的animation屬性用法詳解

一章節。

一.基本知識:

keyframes翻譯成中文，是"關鍵幀"的意思，如果用過flash應該對這個比較好理解，當然不會flash也沒有任何問題。

使用transition屬性也能夠實現過渡動畫效果，但是略顯粗糙，因為不能夠更為精細的控制動畫過程，比如只能夠在指定的時間段內總體控制某一屬性的過渡，而animation屬性則可以利用@keyframes將指定時間段內的動畫劃分的更為精細一些。

語法結構:

@keyframes animationname }

1.animationname:宣告動畫的名稱。

2.keyframes-selector:用來劃分動畫的時長，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。

"from" 和 "to"的形式等價於 0% 和 100%。

建議始終使用百分比形式。

二.**例項:

例項一:

doctype html

>
<
html
>
<
head
>
<
meta 
charset
=" utf-8"
>
<
meta 
name
="author"
content
=""/>
<
title
>螞蟻部落
title
>
<
style 
type
="text/css"
>
div@keyframes theanimation
to } 
@-webkit-keyframes theanimation
to } 
@-moz-keyframes theanimation
to } 
@-o-keyframes theanimation
to } 
@-ms-keyframes theanimation
to } 
style
>
head
>
<
body
>
<
div>
div>
body
>
html
>

1.使用@keyframes定義了乙個名為theanimation的動畫。

2.@keyframes宣告的動畫名稱要和animation配合使用。

3.from to等價於0%-100%，所以就是規定5s內做了一件事情。

例項二:

doctype html

>
<
html
>
<
head
>
<
meta 
charset
=" utf-8"
>
<
meta 
name
="author"
content
=""/>
<
title
>螞蟻部落
title
>
<
style 
type
="text/css"
>
div@keyframes theanimation
25%50%
75%100%
} @-moz-keyframes theanimation
25%50%
75%100%
} @-webkit-keyframes theanimation
25%50%
75%100%
} @-o-keyframes theanimation
25%50%
75%100%
} style
>
head
>
<
body
>
<
div>
div>
body
>
html
>

CSS3動畫 keyframes基礎

動畫的本質是快速切換大量時在人腦中形成的具有連續性的畫面，我們將形成連續性畫面的任意一張稱為楨或動畫幀，它是構成動畫的最小單元，css 中專門提供了建立動畫幀的屬性，並以此為基礎在網頁中建立動畫。keyframes是 css 中提供的專門用於定義動畫關鍵幀的語法詞 關鍵幀序列 keyframes m...

CSS3動畫Keyframes的介紹

css3為animation動畫提供的幾個屬性如下 animation name 指定動畫名稱，該屬性指定乙個已有的關鍵幀定義。animation duration 指定動畫持續時間。animation timing funtion 指定動畫變化速度。animation delay 指定動畫延遲多長...

CSS3 中的 keyframes介紹

語法 keyframes animationname animationname 必需。定義動畫的名稱。keyframes selector 必需。動畫時長的百分比。合法的值 0 100 from 與 0 相同 to 與 100 相同 css styles 必需。乙個或多個合法的 css 樣式屬性。...