``` div {animation-name: example;animation-duration: 4s;}````
from {background-color: red;}
to {background-color: yellow;}
}```
```body div 然后就可以看到顏色變化的動畫了彤悔。```
[see the demo](https://wujianxing.github.io/html/anima)
簡單說 style 中 animation-name指定動畫名字沸呐，animation-duration 定義時(shí)間
然后@keyframes name from...to....實(shí)現(xiàn)動畫屬性喇嘱。
####關(guān)鍵幀 這樣玩也可以
@-webkit-keyframes example2 {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}}
| 值 | 描述 |
| ------------- |:------------------:|
|[animation-duration](http://www.w3school.com.cn/cssref/pr_animation-duration.asp) | 規(guī)定需要綁定到選擇器的 keyframe 名稱規(guī)定完成動畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 |
| [animation-timing-function](http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp) | 規(guī)定動畫的速度曲線贩挣。 |
| [animation-delay](http://www.w3school.com.cn/cssref/pr_animation-delay.asp) |規(guī)定在動畫開始之前的延遲。|
|[animation-iteration-count](http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp)| 規(guī)定動畫應(yīng)該播放的次數(shù)。 |
|[animation-direction](http://www.w3school.com.cn/cssref/pr_animation-direction.asp) | 規(guī)定是否應(yīng)該輪流反向播放動畫痒蓬。 |
|```|```|
|animation-play-state| paused,start...|
|animation-fill-mode| [none,forwards,backwards,both,initial,inherit](http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp)|
|animation-play-state|paused ,running,initial,inherit|
``` animation: mymove 1s infinite;
mymove:我的動畫
1s: 時(shí)間
infinite：無限重復(fù)
backface-visibility : 背面可見，visibal hidden
