CSS-Anima

``` 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

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,141评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,046评论 0 2
  • 1 @keyframes规则 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS...
    随意人生_1b90阅读 56评论 0 0
  • 水不试,不知深浅; 人不交,不知好坏。 说的好不如做得好, 我总是担心身边会失去谁, 可我却忘了问, 又有谁会害怕...
    BT狙阅读 207评论 0 0
  • 毕业一年半啦,做IOS也将近两年了。从IOS入门菜鸟,到现在可以独立完成开发任务。每天准时上班,准时下班,周末双...
    涛里个涛啊阅读 65评论 0 0