CSS3（三）Animation 入門詳解

好的前端工程師，會更注重使用者的體驗和互動。那麼動畫就是將我們的靜態頁面，變成具有靈動性，為我們的介面新增個性的一種方式。

七喜官方**

個人**

github 原始碼(歡迎fork~~)

css3 animation 是由三部分組成。

1.關鍵幀(@keyframes)

下面我們來看乙個例子。

建立了乙個@keyframes命名為dropdown。

.list div:first-child

@keyframes dropdown
/** 暫停效果 */
檢視原始碼
mdn參考**
需要注意！當屬性的個數不確定時：
當我們在定義不同關鍵幀，元素屬性的個數是乙個變化的值。
如果乙個關鍵幀的屬性，沒有出現在其他關鍵幀的時候，那麼這些屬性將會使用上一幀的預設值。
區別在於，預設之後的漸變效果是不會出現的。比如下面兩種寫法，
語法
@keyframeskeyframes-name 

keyframes-name
幀列表的名稱。 名稱必須符合 css 語法中對識別符號的定義。
from
等效於 0%.
to
等效於 100%.
2.動畫屬性 

動畫原始碼
簡寫屬性形式:
mdn參考文件
1.時間函式（animation-timing-function）
動畫原始碼
預設值，如果沒有顯示寫呼叫的函式，則預設為ease。
2.動畫方向（animation-direction）
動畫原始碼
mdn文件
3.動畫延遲（animation-delay）
4.動畫迭代次數（animation-iteration-count）
single-animation-iteration-count =infinite| number

5.動畫填充模式（animation-fill-mode）
single-animation-fill-mode = **none **| **forwards **| **backwards **|both

animation-play-state:定義動畫是否執行或者暫停。可以確定查詢它來確定動畫是否執行。

預設值為running
single-animation-timing-function =running|paused

個人**

github 原始碼
動畫實踐
css3動畫 animation屬性
keyframes具有其自己的語法規則，他的命名是由 keyframes 開頭，後面緊接著是這個 動畫的名稱 加上一對花括號 括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於乙個 keyframes 中的樣式規則是由多個百分比構成的，如 0 到 100 之間，我們可以在這個規則...
CSS3 動畫屬性（Animation）
css 屬性 css 屬性組 動畫 背景 邊框和輪廓 盒 框 顏色 內容分頁 定位 可伸縮框 字型 生成內容 網格 超連結 行框 列表 外邊距 marquee 多列 內邊距 分頁 定位 列印 ruby 語音 文字 2d 3d 轉換 過渡 使用者介面 css 列指示該屬性是在哪個 css 版本 css...
CSS3的新屬性animation
css3中新增的新屬性animation是用來為元素實現動畫效果的。但是animation無法單獨擔當起實現動畫的效果。這個我們會在後面講到。我們先來講講animation的相關用法。這裡我的 均是採用標準的css3規範書寫，大家使用的時候為了相容可加上 webkit o ms moz khtml ...