Css3動畫-@keyframes與animation
一、@keyframe
目前瀏覽器都不支持 @keyframes 規則。
Firefox 支持替代的 @-moz-keyframes 規則。
Opera 支持替代的 @-o-keyframes 規則。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則。
1.定義和用法
通過 @keyframes 規則，您能夠創建動畫。
創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
註釋：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。
2.語法
@keyframes animationname {keyframes-selector {css-styles;}}
|
值 |
描述 |
|
animationname |
必需。定義動畫的名稱。 |
|
keyframes-selector |
必需。動畫時長的百分比。 合法的值：
|
|
css-styles |
必需。一個或多個合法的 CSS 樣式屬性。 |
二、animation
Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。
Safari 和 Chrome 支持替代的 -webkit-animation 屬性。
註釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。
1.定義和用法
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
註釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。
|
默認值： |
none 0 ease 0 1 normal |
|
繼承性： |
no |
|
版本： |
CSS3 |
|
JavaScript 語法： |
object.style.animation="mymove 5s infinite" |
語法
animation: name duration timing-function delay iteration-count direction;
|
值 |
描述 |
|
animation-name |
規定需要綁定到選擇器的 keyframe 名稱。。 |
|
animation-duration |
規定完成動畫所花費的時間，以秒或毫秒計。 |
|
animation-timing-function |
規定動畫的速度曲線。 |
|
animation-delay |
規定在動畫開始之前的延遲。 |
|
animation-iteration-count |
規定動畫應該播放的次數。 |
|
animation-direction |
規定是否應該輪流反向播放動畫。 |
animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您能夠在該函數中使用自己的值，也可以預定義的值：
|
值 |
描述 |
測試 |
|
linear |
動畫從頭到尾的速度是相同的。 |
測試 |
|
ease |
默認。動畫以低速開始，然後加快，在結束前變慢。 |
測試 |
|
ease-in |
動畫以低速開始。 |
測試 |
|
ease-out |
動畫以低速結束。 |
測試 |
|
ease-in-out |
動畫以低速開始和結束。 |
測試 |
|
cubic-bezier(n,n,n,n) |
在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。 |
|
animation-iteration-count: n | infinite;
|
值 |
描述 |
測試 |
|
n |
定義動畫播放次數的數值。 |
測試 |
|
infinite |
規定動畫應該無限次播放。 |
測試 |
三、例子
在應用 CSS3 漸變/動畫時，有個控制動畫速度曲線的屬性timing-function 。它的取值中除了常用到的 貝塞爾曲線 以外，還有個 steps() 函數。steps(n,start/end) 第一個參數 number 為指定的間隔數，即把動畫分為 n 步階段性展示，第二個參數默認為 end，設置最後一步的狀態，start 為結束時的狀態，end 為開始時的狀態。
Css3動畫-@keyframes與animation