1.5 animate · Html和Css

### **animate動畫** **注意點：** **1.** Animation只應用在頁面上已存在的DOM元素上。 **2.**學習Animation之前我們有必要先來了解"Keyframes",我們把他叫做“關鍵幀。 ### Keyframes **注意點**： **1.** Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接著是這個“**動畫的名稱**”加上一對花括號“**{}**”。 **2.** @keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等， **3.** 可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當于"0%"而"to"相當于"100%" **4.** keyframes的單位只接受百分比值 #### **animation屬性** animation屬性合并寫法： animation:<**animation-name**> || <**animation-duration**> || <**animation-timing-function**> || **<animation-delay>** || <**animation-iteration-count**> || <**animation-direction**> ![](https://box.kancloud.cn/1126f6336818c61ce5edbf36f474ead8_907x270.png) **一、animation-name**：用來定義一個動畫的名稱，值有2個：none或**動畫的名稱** 注意點： 1. 此處的**動畫的名稱**要和Keyframes中的**動畫的名稱**一致，如果不一致,將不能實現任何動畫效果； 2. none為默認值，當值為none時，將沒有任何動畫效果。 3. 同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。 **二、animation-duration**：定義動畫完成一個周期所花費的時間（秒或毫秒），默認值是0，也就是變換時是即時的。 **三、animation-timing-function:**：定義動畫的播放方式。具有以下六種變換方式： 1、ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0). 2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0). 4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0) 6、cubic-bezier：（該值允許你去自定義一個時間曲線），特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。 **四、animation-delay:** 定義動畫開始前等待的時間，即動畫何時開始效果展現。值有2個：多小秒（毫秒）和0 注意點：默認大小是"0"，也就是變換立即執行，沒有延遲。 **五、animation-iteration-count**：指定元素播放動畫的循環次數。注意點：其可以取值為數字，其默認值為“1”；infinite為無限次數循環。 **六、animation-direction**：指定元素動畫播放的方向。其只有兩個值，默認值為**normal**和**alternate**。注意點：如果設置為normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。著作權歸作者所有。 **七、animation-play-state**是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused，running為默認值（這個屬性目前很少內核支持）注意點： 1.使用running，則播放不一定是從元素動畫的開始播放，而是從你暫停的那個位置開始播放。 2.如果使用paused，暫停動畫的播放，元素的樣式將回到最原始設置狀態。示例：發光的按鈕請見站點里面的面或網站[http://www.w3cplus.com/content/css3-animation](http://www.w3cplus.com/content/css3-animation) step（）函數網址： 1.[http://blog.csdn.net/christine95/article/details/50471101](http://blog.csdn.net/christine95/article/details/50471101)