32.CSS3过渡效果

                                         第二十五章           CSS3过渡效果

一、过渡简介

        过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：hover、：focus、：active、：checked等，CSS3提供了transition属性来实现这个过渡的，主要属性如下

            属性                          说明

       transition-property              指定过渡或动态模拟的CSS属性

       transition-duration              制定完成过渡所需的时间

       transition-timing-function       制定过渡的函数

       transition-delay                 指定过渡开始出现的延迟时间

       transition                       简写形式，按照上面四个属性连写

二、transition-property

       首先，设置过渡的第一个属性就是指定的过渡属性。transition-property详细属性如下

         （1）none: 没有指定任何样式

         （2）all : 默认值，指定元素所支持transition-property属性的样式

         （3）指定样式： 指定支持transition-property的样式

         //从上面看出，none用于本身有过渡样式从而取消。而all支持所有transition-property样式，还有一种是指定transition-property中的某些样式。

           transition-property支持的样式有：

                样式名称                  样式类型

           background-color          color（颜色）

           background-image          only gradients（渐变）

           background-position       percentage,length(百分百，长度值)

           border-bottom-color       color

           border-bottom-width       length

           border-left-color         color

           border-left-width         length

           border-right-color        color

           border-right-width        length

           border-spacing            length

           border-top-color          color

           border-top-width          length

           border-width              length

           bottom                    length,percentage

           color                     color

           crop                      rectangle

           font-size                 length,percentage

              ·

              ·

              ·

三、transition-duration

         如果单独的设置样式，还不能够立刻实现效果，必须加上过渡所需的时间，因为默认情况下，过渡时间为0.

             //设置过渡时间为1秒，如果是半秒钟可以设为.5s

                 transition-duration:1s;

四、transition-timing-function

         当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢，即ease也是默认值，其他几种缓动方式如下：

          （1）ease ：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）

          （2）linear ：元素样式从初始状态过渡到终止状态熟读是恒速，等同于贝塞尔曲线（0.0,0.0,1.0,1.0）

          （3）ease-in  ： 。。。。速度越来越快，贝塞尔曲线（0.42,0，1.0，1.0）

          （4）ease-out ： 。。。。速度越来越慢，贝塞尔曲线（0,0,0.58,1.0）

          （5）ease-in-out ：。。。先加速，后减速。贝塞尔曲线（0.42,0,0.58,1.0）

             //恒定速度     transition-timing-function:linear;

             //贝塞尔曲线   transition-timing-function:cubic-bezier(0.25,0.65,0.88,0.25)

五、transition-delay     设置一个延迟效果，就是设置延迟后时间后在执行效果。如果有多个样式效果，可以设置多个延迟时间，以空格隔开：

                            transition-delay：0s,1s,0s;

六、简写和版本

           可以使用transition来简写，有两种形式的简写

          （1）单独声明

                   transition：background-color 1s ease 0s,color 1s ease 0s,margin-left 1s ease 0s;

               //如果都是统一的，直接使用all

                     transition ：all is ease 0s;

                                 Opera       Firefox       Chrome       Safari        IE

              支持需带前缀       15～22       5～15         4～25        3.1～6        无

              支持不带前缀         23+         16+           26+          6.1+       10.0+

              //兼容完整版（省略）