css3动画:animation

白昼怎懂夜的黑 提交于 2020-01-13 09:56:25

例:

-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate;@keyframes myfirst{  from{background:red;}  to{background:yellow;}}@-webkit-keyframes myfirst{  frome{background:red;}  to{background:yellow;}} //或者@keyframes myfirst{  0%{   }  25%{   }  50%{    }  100%{    }}

 参数及含义:

animation-name: 动画的名字

animation-duration: 动画完成一个周期所花费的秒数,默认是0

animation-timing-function: 规定动画的速度曲线,默认是ease(动画以低速开始,然后加块,在结束前变慢);

              linear(动画从头到尾的速度是相同的)

              ease-in(动画以低速开始)

              ease-out(动画以低速结束)

              ease-in-out(动画以低速开始和结束)

animation-delay: 规定动画何时开始,默认是0;

animation-iteration-count: 规定动画被播放的次数,默认是1, infinite(无限循环)

animation-direction: 规定动画是否在下一周期逆向地播放,默认是normal(不逆向播放)

            reverse(动画反向播放)

            alternate(动画在奇数1,3,5、、、正向播放,在偶数2,4,5、、、反向播放) 

            alternate-reverse(动画在奇数次1,3,4、、、反向播放,在偶数次2,4,6、、、正向播放) 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!