``` 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 定义时间
然后@keyframes name from...to....实现动画属性。
####关键帧 这样玩也可以
@-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) | 规定需要绑定到选择器的 keyframe 名称规定完成动画所花费的时间，以秒或毫秒计。 |
| [animation-timing-function](http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp) | 规定动画的速度曲线。 |
| [animation-delay](http://www.w3school.com.cn/cssref/pr_animation-delay.asp) |规定在动画开始之前的延迟。|
|[animation-iteration-count](http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp)| 规定动画应该播放的次数。 |
|[animation-direction](http://www.w3school.com.cn/cssref/pr_animation-direction.asp) | 规定是否应该轮流反向播放动画。 |
|```|```|
|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: 时间
infinite：无限重复
backface-visibility : 背面可见，visibal hidden
