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:

transtion animation_第1张图片

3、浏览器前缀

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

你可能感兴趣的:(transtion animation)