Hi,are you ready?

准备好开始了吗?
那就与我们取得联系吧

有一个网站项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您 给我们写信或是打电话,让我们听到你的声音!

Distance远近互联网络运营服务商

地 址:河北省石家庄市新华区华强广场5楼

电 话:14730427447

E-mail:815752879@qq.com

填写您的项目信息

【前端】CSS3过度和动画

发布时间:2018-07-17T11:47:36

  一.过渡和动画

1.过渡效果语法

  1>transition-property:all | none | property,property 

检索或设置对象中的参与过渡的属性  

property: 指定要进行过渡的css属性

  2>transition-duration:time[ ,time ]... 默认值:0

time: 指定对象过渡的持续时间

  3>transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | 

          cubic-bezier(number, number, number, number) ?

设置对象中过渡的动画类型

  4>transition-delay:time[ ,time ]. 默认值:0

或设置对象延迟过渡的时间

time: 指定对象过渡的延迟时间

  5>使用顺序:1,2,3,4

2.动画

  1>animation属性

      动画属性名:-webkit-animation-name:move;  

      动画持续时间:-webkit-animation-duration: 10s; 

      动画帧频:webkit-animation-timing-function: ease-in-out 

      动画延迟时间:-webkit-animation-delay: 2s;  

      动画循环次数:-webkit-animation-iteration-count:10;  infinite为无限次

      动画播放方式:-webkit-animation-direction: normal

      默认normal,动画正常播放;  alternate,动画轮流反向播放

      例:.all { -webkit-animation:move(动画名) 5s(时长) linear(帧频) infinite(循环次数); }

          2>关键帧语法      

              @-webkit-keyframes move{

      0%{background-color: green}

      40%{background-color: orange}

      60%{background-color: blue}

      100%{background-color: red;}

       }


    远近互联前端小华整理发布,希望能对学习技术的你有所帮助

    远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务,让客户通过网络品牌建立与网络传播提高业绩。


【相关推荐】
返回列表
在线沟通

Are you interested in ?

  您感兴趣吗?

有关我们服务的更多信息,请联系

147 3042 7447 周经理

与我们合作

与远近互联合作,您将会得到更成熟的网络品牌建设服务。我们以客户至上,同时也相互挑战,力求呈现更好的网络品牌建设成果。

项目经理热线(周经理):

147 3042 7447

TOP

QQ客服

14730427447