第八十二节，CSS3过渡效果

CSS3过渡效果

学习要点：
1.过渡简介
2.transition-property
3.transition-duration
4.transition-timing-function
5.transition-delay
6.简写和版本

本章主要探讨HTML5中CSS3的过渡效果，通过这个功能可以不借 JavaScript来实现简单的用户交互功能。

一．过渡简介

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

                 属性                                       说明

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

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

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

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

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

我们先创建一个没有过渡效果的元素，然后通过:hover来触发它。在没有任何过渡效果的触发，会立即生硬的执行触发。

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

二．transition-property 在元素选择器上,指定元素伪类选择器里要执行过渡的样式属性

    首先，设置过渡的第一个属性就是指定过渡的属性。在元素选择器上,指定元素伪类选择器里要执行过渡的样式属性。那么就使用transition-property属性，详细属性值如下表：

            属性值                                 说明

             none          　　　　 　　没有指定任何样式

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

           指定样式           　　　　   指定支持transition-property的样式

从上面的列表中来看，一般来说，none用于本身有过渡样式从而取消。而all，则是支持所有transition-property样式，还有一种是指定transition-property中的某些样式。那么transition-proerty支持的样式有哪些？如下表所示：

transition-proerty支持的样式有

               样式名称                              　　　　 样式类型

     background-color               　　　　　　   color(颜色)

     background-image               　　　　　　  only gradients(渐变)

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

     border-bottom-color            　　　　　　  color

     border-bottom-width            　　　　　　 length

     border-color                   　　　　　　　　 color

     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

 font-weight                          　　　　　　   number

 grid-*                                　　　　　　　　various

 height                                　　　　　　　   length, percentage

 left                                  　　　　　　　　   length, percentage

 letter-spacing                       　　　　　　   length

 line-height                           　　　　　　   number, length, percentage

 margin-bottom                          　　　　   length

 margin-left                            　　　　　　 length

 margin-right                           　　　　　  length

 margin-top                             　　　　　  length

 max-height                            　　　　　   length, percentage

 max-width                              　　　　　  length, percentage

 min-height                             　　　　　   length, percentage

 min-width                              　　　　　   length, percentage

 opacity                              　　　　　　　 number

 outline-color                         　　　　　　color

 outline-offset                         　　　　　  integer

 outline-width                          　　　　　 length

 padding-bottom                         　　　　 length

 padding-left                           　　　　　  length

 padding-right                          　　　　    length

 padding-top                                            length

 right                                  　　　　　　　length, percentage

 text-indent                            　　　　　  length, percentage

 text-shadow                            　　　　  shadow

 top                                    　　　　　　　length, percentage

 vertical-align                         　　　　　  keywords, length, percentage

 visibility                            　　　　　　　visibility

 width                                  　　　　　　 length, percentage

 word-spacing                           　　　　 length, percentage

 z-index                                　　　　　　integer

 zoom                                  　　　　　　 number

在元素选择器上,指定元素伪类选择器里要执行过渡的样式属性

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*设置背景颜色、边框、边距为过渡效果,如果设置all或者不设置默认支持所有样式*/
    transition-property: background-color ,border ,margin-left;
}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

三．transition-duration 在元素选择器里设置过渡时间
如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默认情况下过渡时间为0。设置过渡时间为1秒钟，如果是半秒钟可以设置为.5s

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*设置背景颜色、边框、边距为过渡效果,如果设置all或者不设置默认支持所有样式*/
    transition-property: background-color ,border ,margin-left;
    /*设置过渡时间*/
    transition-duration: 1s;
}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

四．transition-timing-function产生缓动效果

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

            属性值                                说明

             ease             　　　　默认值，元素样式从初始状态过渡到终止状态时速度由

                     　　　　　　　   快到慢，逐渐变慢。等同于贝塞尔曲线(0.25,0.1,

                         　　　　　　  0.25, 1.0)

 

            linear           　　       元素样式从初始状态过渡到终止状态速度是恒速。等同

                          　　　　      于贝塞尔曲线(0.0,0.0, 1.0, 1.0)

 

           ease-in              　　  元素样式从初始状态过渡到终止状态时，速度越来越

                   　　　　　　　　 快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,

                         　　　　　　 1.0, 1.0)

 

          ease-out             　　  元素样式从初始状态过渡到终止状态时，速度越来越

                 　　　　　　　　   慢，呈一种减速状态。等同于贝塞尔曲线(0,0,0.58,

                          　　　　      1.0)

 

        ease-in-out             　　元素样式从初始状态过渡到终止状态时，先加速，再减

                          　　　　　　 速。等同于贝塞尔曲线(0.42,0, 0.58, 1.0)

 

       cubic-bezier()                贝塞尔曲线，6个值，比较复杂，忽略

 

        steps(1,end)   　　        第一个值是一 个数值，表示跳跃几次。第二个值是start或者end，可选值。

                                             表示开始时跳跃，还是结 束时跳跃

设置缓动效果

/*设置元素样式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*设置背景颜色、边框、边距为过渡效果,如果设置all或者不设置默认支持所有样式*/
    transition-property: background-color ,border ,margin-left;
    /*设置过渡时间*/
    transition-duration: 1s;
    /*置缓动效果 */
    transition-timing-function: ease;

}
/*鼠标悬停后样式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青传媒股份</p>
</div>

五．transition-delay 过渡延迟
这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用transition-delay属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。设置延迟效果
如：transition-delay: 0s, 1s, 0s;

六．简写和版本

    我可以直接使用transition来简写，有两种形式的简写。第一种是，每个样式单独声明；第二种是不去考虑样式，即使用all全部声明。

   

单独声明

    说明：transition:过渡样式 过渡时间 缓动效果 过渡延迟;

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

   

如果每个样式都是统一的，直接使用all，不去考虑样式

    说明：transition: all(所有样式) 过渡时间 缓动效果 过渡延迟;

transition: all 1s ease 0s;

为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

                        　　　　Opera     　　　　Firefox  　　　　Chrome      　　Safari     　　 　IE

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

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

 

兼容完整版

-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
-o-transition:all 1s ease 0s;
-ms-transition:all 1s ease 0s;
transition: all 1s ease 0s;