用CSS3的animation實現動畫
用到了animation就先說說這個屬性吧！
一、animation屬性簡介
animation是網頁上的動畫，是通過@keyframe定義一個定義幀動畫！完成網頁的炫酷的小動畫！在CSS3出現之前，網頁上的動畫大多是用flash實現的，flash動畫會產生很大的弊端！操作不便等等
因爲暫時是學習回憶階段，沒有考慮兼容性問題，所以在css裏沒有加上前綴，請見諒！
1. 語法
animation: name duration timing-function delay iteration-count direction;2. 定義和用法
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
- animation-name
- --規定需要綁定到選擇器的 keyframe 名稱。。
- animation-duration
- --規定完成動畫所花費的時間，以秒或毫秒計。
- animation-timing-function
- --規定動畫的速度曲線。
- animation-delay
- --規定在動畫開始之前的延遲。
- animation-iteration-count
- --規定動畫應該播放的次數。
- animation-direction
- --規定是否應該輪流反向播放動畫。
| 值 | 描述 |
|---|---|
| animation-name | 規定需要綁定到選擇器的 keyframe 名稱。。 |
| animation-duration | 規定完成動畫所花費的時間，以秒或毫秒計。 |
| animation-timing-function | 規定動畫的速度曲線。 |
| animation-delay | 規定在動畫開始之前的延遲。 |
| animation-iteration-count | 規定動畫應該播放的次數。 |
| animation-direction | 規定是否應該輪流反向播放動畫。 |
1. animation-name
animation-name 屬性爲 @keyframes 動畫規定名稱。
animation-name: keyframename|none;| 值 | 描述 |
|---|---|
| keyframename | 規定需要綁定到選擇器的 keyframe 的名稱。 |
| none | 規定無動畫效果（可用於覆蓋來自級聯的動畫）。 |
2. animation-duration
animation-duration 屬性定義動畫完成一個週期所需要的時間，以秒或毫秒計。
animation-duration: time;| 值 | 描述 |
|---|---|
| time | 規定完成動畫所花費的時間。默認值是 0，意味着沒有動畫效果。 |
3. animation-timing-function
animation-timing-function 規定動畫的速度曲線。
速度曲線定義動畫從一套 CSS 樣式變爲另一套所用的時間。
速度曲線用於使變化更爲平滑。
animation-timing-function: value;animation-timing-function 使用名爲三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您能夠在該函數中使用自己的值，也可以預定義的值：
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是相同的。（等於 cubic-bezier(0,0,1,1)）。 |
| ease | 默認。動畫以低速開始，然後加快，在結束前變慢。（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 動畫以低速開始。（等於 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 動畫以低速結束。（等於 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 動畫以低速開始和結束。（等於 cubic-bezier(0.42,0,0.58,1)） |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。推薦個有意思的鏈接，貝塞爾曲線鏈接 |
4. animation-delay
animation-delay 值以秒或毫秒計。
animation-delay 屬性定義動畫何時開始。
提示：允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫。
animation-delay: time;| 值 | 描述 |
|---|---|
| time | 可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。 |
5. animation-iteration-count
animation-iteration-count 屬性定義動畫的播放次數。
animation-iteration-count: n|infinite;| 值 | 描述 |
|---|---|
| n | 定義動畫播放次數的數值。 |
| infinite | 規定動畫應該無限次播放。 |
6. animation-direction
animation-direction屬性規定動畫是否循環播放
animation-direction:normal|alternate;
7. animation-fill-mode
animation-fill-mode 屬性規定動畫在播放之前或之後，其動畫效果是否可見。
註釋：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。
animation-fill-mode 是不能被定義在animation簡寫屬性裏面的，只能定義在animation簡寫屬性的外面
animation-fill-mode : none | forwards | backwards | both;| 值 | 描述 |
|---|---|
| none | 不改變默認行爲。 |
| forwards | 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。 |
| backwards | 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。 |
| both | 向前和向後填充模式都被應用。 |
8. animation-play-state
animation-play-state 屬性規定動畫正在運行還是暫停。
animation-play-state 是不能被定義在animation簡寫屬性裏面的，只能定義在animation簡寫屬性的外面
animation-play-state: paused|running;| 值 | 描述 |
|---|---|
| paused | 規定動畫已暫停。 |
| running | 規定動畫正在播放。 |
二丶介紹下他們的使用情況吧
動畫
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
CSS3 @keyframes 規則
如需在 CSS3 中創建動畫，您需要學習 @keyframes 規則。
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改爲新樣式的動畫效果。
當您在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。
下面是我們實現動畫的過程了
首先，先寫個字體出來吧！就一我上一篇介紹的火焰字好了！上篇的代碼對這篇的代碼不會有干擾的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置瀏覽器默認的兩個值，
對本文沒有太大影響，不知道可以無視*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 300px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "華文行楷";
background: #000;
color:#F60;
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
</style>
</head>
<body>
<div class="div1">超炫火焰字</div>
</body>
</html>效果如圖：
1.animation-name
我們在color後面添加一個animation-name動畫名字吧
animation-name:myanim;然後我們接續創建一個@keyframes{}動畫
/*記住這個不用放到div1類名裏面的*/
@keyframes myanim{
0%{
text-shadow: 0 0 0 #000;
}
100%{
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
}
我們就會發現暫時是沒有效果的，因爲我們沒有添加完成的時間
3.animation-timing-function
我們在animation-duration後面添加一個animation-timing-function動畫整個過程的動畫的速度曲線
animation-timing-function:linear;我們就會發現沒什麼效果，因爲這個是速度，速度爲勻速嘛！你們也可以將速度改變就可以了
4.animation-delay
我們在animation-timing-function後面添加一個animation-delay動畫延遲的時間爲2s吧
animation-duration:2s;我們就會發現出現了一個動畫被延遲了2s後纔開始完成的一次動畫
5.animation-iteration-count
我們在animation-timing-function後面添加一個animation-iteration-count動畫的次數吧
animation-iteration-count:2;我們就會發現動畫被播放2次
6.animation-direction
我們在animation-delay後面添加一個animation-direction動畫是否循環播放吧
animation-direction:alternate;我們就會發現出現了一個動畫是慢慢出來，然後慢慢縮回去的？
7.animation-fill-mode
我們在animation-direction後面添加一個animation-fill-mode,讓動畫在動畫之外是否保持動畫的狀態，並且將次數改爲3
animation-fill-mode:both;我們就會發現出現了一個動畫先出來，然後回去，再出來，這樣就經過3次之後就完全停在了最後的狀態是不是並沒有像剛纔那樣閃回去了？還有一個暫時屬性的，很少用到就不在這講解了，你們可以嘗試給hover效果時添加這個屬性，那麼當鼠標移進的時候就會觸發動畫的暫停效果了
好了這次文章介紹的動畫就到此結束了