CSS3 过渡效果语法及属性

1、CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
语法

transition:property duration timing-function delay;

transition:属性名   过渡时间   切换效果的速度   何时开始切换

2、CSS3 过渡属性
(1) transition-property 规定应用过渡的 CSS 属性的名称。
语法

transition-property: none|all| property;

值
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

(2) transition-duration 定义过渡效果花费的时间，默认是 “0”。
语法

transition-duration: time; //如 5s(5秒) 或 5000ms(5000毫秒)

(3) transition-timing-function 规定过渡效果的时间曲线(速度)，默认是 “ease”。
语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值
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 之间的数值。
(4) transition-delay 规定过渡效果何时开始，默认是 “0”。
语法

transition-delay: time; //如 5s(5秒) 或 5000ms(5000毫秒)

3、示例

.trans{
    
    
    width:100px;
    height:100px;
    background:#f60;
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

简写

.trans{
    
    
    width:100px;
    height:100px;
    background:#f60;
    transition: width 1s linear 2s;
    -webkit-transition:width 1s linear 2s;   /* Safari */
}

完整示例
鼠标移动到绑定选择器的div 元素上，宽度的过渡效果

.trans{
    
    
    width:100px;
    height:100px;
    background:#f60;
    transition: width 1s linear 2s;
    -webkit-transition:width 1s linear 2s;   /* Safari */
}
.trans:hover{
    
    
     width:300px;
}

页面调用：

<div class="trans"></div>