css过渡

过渡transition是一个复合属性

例子1

  .example{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            transition-duration: 3s;
            transition-property: all;
            transition-timing-function: ease;
            transition-delay: 0s;
        }
        .example:hover{
            width: 500px;
        }

属性解析：

transition-duration:持续的时间，默认为0，是必需值，但是不能为0

transition-property:过渡的属性,默认值为all

transition-trming-function:过渡函数，默认值为ease

transition-delay:过渡延迟时间，默认值为0

 

过渡的属性：

1）背景颜色 background-color

 .example4{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*代表持续时间为1s,延迟时间为2s*/
            transition:2s;
        }
        .example4:hover{
            background-color: #5cb85c;
            width: 500px;
        }

2)  none:

3) all：所有的属性

4) width

5)width,background（可以写多个属性，可以用；分隔开）

注意：IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

例子2：

 .example2{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*代表持续时间为2s*/
            transition: 2s;
        }
        .example2:hover{
            width: 500px;
        }

例子3

.example3{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
            /*代表持续时间为1s,延迟时间为2s*/
            transition: 1s 2s;
        }
        .example3:hover{
            width: 500px;
        }

过渡的样式：

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

过度持续的时间：
该属性的单位是秒s或者毫秒ms
该属性的默认值为0，但是0无效，必须得带单位

过渡时间函数(transition-timing-function)：
 过渡时间函数用于定义过渡属性随时间变化的过渡速度变化的效果
默认值是：ease
取值：三种取值,分别是关键字，steps函数，bezier函数
1）steps函数
steps步进函数将过渡时间划分为大小相等的时间间隔来运行