2019-07-05 过渡和动画

过渡：
属性：transition:

   过渡属性:
          transition-property:width/height/background/color/all
          取值：
             all 制定所有元素支持transition-property属性的样式，一般为了方便都用all
             定义转换动画的css属性名称
             如：宽   高    背景  颜色
       
   过渡时间：
        transition-duration：2s; 单位为秒
    
   过渡函数：制定过渡的速度
        属性：
           transition-timing-function:
               取值：
                   ease  默认值  速度由快到慢
                   linear  匀速运动
                   ease-in 速度越来越快
                   ease-out 速度越来越慢
                   ease-in-out  先加速再减速








          过渡的延迟时间：
             transition-delay:1s;


  动画：
      属性：animation:

         css:
            .box{
               animation:load 加载时间  速度  动画执行的次数
               animation:load 1s linear infinite(无限次);
            }

      定义一个动画：
         @keyframes load（动画名称）{
              from{
                 transform:rotate(0deg);
              }
              to{
                  transform:rotate(360deg);
              }
             
         }

动画执行的次数：
      animation-iteration-count:
          取值：
              1(默认值)
              2
              3
              。。。。
              infinite 无限次