@keyframes <identifier> { <keyframes-blocks> }

<keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

<identifier>：

identifier定義一個(gè)動(dòng)畫名稱

<keyframes-blocks>：

定義動(dòng)畫在每個(gè)階段的樣式，即幀動(dòng)畫。

• @keyframes定義的動(dòng)畫名稱用來(lái)被animation-name所使用。
• 定義動(dòng)畫時(shí)，簡(jiǎn)單的動(dòng)畫可以直接使用關(guān)鍵字from和to，即從一種狀態(tài)過(guò)渡到另一種狀態(tài)：

  示例代碼：

  @keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }

  其中testanimations是該動(dòng)畫的名字，該動(dòng)畫表示某個(gè)東西將逐漸消失。

• 如果復(fù)雜的動(dòng)畫，可以混合<percentage>去設(shè)置某個(gè)時(shí)間段內(nèi)的任意時(shí)間點(diǎn)的樣式：

  示例代碼：

  @keyframes testanimations { from { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20); } 80% { transform: translate(80px, 0); } to { transform: translate(100px, 20px); } }

• 當(dāng)然，也可以不使用關(guān)鍵字from和to，而都使用<percentage>：

  示例代碼：

  @keyframes testanimations{ 0% { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20px); } 80% { transform: translate(80px, 0); } 100% { transform: translate(100px, 20px); } }

  注意，這里的0%不能簡(jiǎn)寫成0，0是非標(biāo)準(zhǔn)語(yǔ)法（雖然被某些瀏覽器所支持）。

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持