transtion animation

1、@keyframes定义动画，以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%

     语法：@keyframes  animationname{keyframes-selector{css-styles;}}

               keyframes 名称 {动画时长百分比 {css-styles;}}

demo:

{

animation:mymove 5s infinite;

-moz-animation:mymove 5s infinite; /* Firefox */

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

-o-animation:mymove 5s infinite; /* Opera */

@keyframes mymove                                

                                                      //infinite无限循环，rainbow一次或者一周期

}

{  0%  {top:0px;}

  25%  {top:200px;}

  50%  {top:100px;}

  75%  {top:200px;}

  100% {top:0px;}    }                  // 时间段 { 对应时间所在位置 }

2、Transition（过渡）

  语法：transition : property duration timing-function delay;

           transition:该过渡属性名称  完成动画时间  速度效果曲线  何时开始 ;

transition-delay : 

transition:1s height, 1s width;  //都设置跟没有效果一样，单独设置有不一样的效果

timing-function:

3、浏览器前缀

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。