一.过渡和动画

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、微信运营的品牌整合营销服务，让客户通过网络品牌建立与网络传播提高业绩。