CSS过渡

        1.过渡

               过渡是从一个状态到另一个状态的过程 ，这个过程就是过渡 

  1.1过渡属性

1.  transition-property：设置元素中需要过渡的属性；
2. transition-duration：设置元素过渡的时间；
3. transition-timing-function：设置元素过渡的动画类型；
4. transition-delay：设置过渡效果延迟的时间，默认为 0；
5. transition：简写属性，用于同时设置上面的四个过渡属性。

        注意

                不是所有的属性都可以过渡。  值为数字或者值可以转成数字的属性才支持过渡

         比较常见的支持过渡的属性有：颜色、长度、百分比、层级、透明度、2D、3D变换属性、阴影。

         1.1.1transition-property

                transition-property用来设置元素中需要过渡的属性  语法如下

     transition-property: 需要过渡的属性 / none (不过度) / all (过渡所有可以过渡的属性) ;

        代码如下图：

          

      

   1.1.2 transition-duration 

             transition-duration用来设置过渡所需要的时间  语法如下

  transition-duration：数值+s/ms

         代码如下图：

         

      运行效果如下图：

        

         1.1.3 transition-timing-function

                transition-timing-function是设置过渡动画的类型，属性的值如下：

值	描述
linear	以始终相同的舒服完成整个过渡过程，等同于cubic-bezier(0,0,1,1)
ease	以慢速开始，然后变快，然后慢速结束的顺序完成整个过程等同于 cubic-bezier(0.25,0.1,0.25,1)
ease-in	以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)
ease-out	以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)
ease-in-out	以慢速开始并且以慢速结束整个过渡过程，等同于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间

示例代码如下：

         

1.1.4 transition-delay

         transition-delay属性是用来设置过渡效果从什么时候开始的

        transition-delay: 数值+s/ms

         示例代码如下：

        

 

        运行效果图如下：

                

 1.1.5 transition

        transition 属性是以上属性的简写形式，通过transition可以同时设置上面的属性

        实例代码如下图：

 

        效果图如下：