***介紹的屬性并不完全，寫的都是我認為容易混淆的難點屬性，所以屬性會在最后綜合案例展示~
Keyframes介紹：
Keyframes被稱為關鍵幀，其類似于Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規(guī)則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
animation
animation: [name/動畫名稱] [duration/動畫時間] [timing-function/動畫周期(ease)] delay[動畫延時] [iteration-count/動畫播放次數(shù)] [direction/指定是否應該輪流反向播放動畫] [fill-mode/規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式] [play-state/指定動畫是否正在運行或已暫停];
| 屬性 | 屬性單獨使用 | 屬性作用 | 屬性可選值 |
|---|---|---|---|
| name | animation-name | 動畫名稱(@keyframes name) | @keframes name |
| duration | animation-duration | 動畫運行時間(1s) | 參數(shù)num(1s or 0.5s) |
| timing-function | animation-timing-function | 設置動畫將如何完成一個周期 | - linear [動畫從頭到尾的速度是相同的] - ease [默認。動畫以低速開始，然后加快，在結束前變慢] - ease-in [動畫以低速開始] - ease-out [動畫以低速結束] - ease-in-out [動畫以低速開始和結束] - cubic-bezier(n,n,n,n) [在 cubic-bezier 函數(shù)中自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值] |
| delay | animation-delay | 設置動畫在啟動前的延遲間隔 | time [可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值為0] |
| iteration-count | animation-iteration-count | 定義動畫的播放次數(shù) | - n [一個數(shù)字，定義應該播放多少次動畫] - infinite [指定動畫應該播放無限次（永遠] |
| direction | animation-direction | 指定是否應該輪流反向播放動畫 | - normal [默認值。動畫按正常播放] - reverse [動畫反向播放] - alternate [動畫在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放] - alternate-reverse [動畫在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放] - initial [置該屬性為它的默認值。請參閱initial] - inherit [從父元素繼承該屬性。請參閱inherit] |
| fill-mode | animation-fill-mode | 規(guī)定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式 | |
| play-state | animation-play-state | 指定動畫是否正在運行或已暫停 |
- 示例：創(chuàng)建一個動畫名叫“changecolor”，在“0%”時背景色為red,在20%時背景色為blue，在40%背景色為orange，在60%背景色為green，在80%時背景色yellow，在100%處時背景色為red。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3動畫</title>
<style>
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>hover顏色改變</div>
</body>
</html>
設置動畫播放方式
語法規(guī)則：
- animation-timing-function:ease(由快到慢，逐漸變慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
1.png
設置動畫播放方向
animation-direction屬性主要用來設置動畫播放方向，其語法規(guī)則如下：
- animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
normal是默認值，如果設置為normal時，動畫的每次循環(huán)都是向前播放；
另一個值是alternate，他的作用是，動畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
設置動畫的播放狀態(tài)
animation-play-state屬性主要用來控制元素動畫的播放狀態(tài)。
參數(shù)：
其主要有兩個值：running和paused。
其中running是其默認值，主要作用就是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態(tài)。
例如，頁面加載時，動畫不播放。代碼如下：
- animation-play-state:paused;
設置動畫時間外屬性
- animation-fill-mode屬性定義在動畫開始之前和結束之后發(fā)生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
- none | 默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處
- forwards | 表示動畫在結束后繼續(xù)應用最后的關鍵幀的位置
- backwards | 會在向元素應用動畫樣式時迅速應用動畫的初始幀
- both | 元素動畫同時具有forwards和backwards效果
