transition Css3过度详解

过度语法：

.example {
    transition-property: background-color;     //需要过度的css属性
    transition-duration: 2s;               //过度所需要的时间
    transition-timing-function: ease-in;   //过度的类型
    transition-delay: 1s;   //过度延迟的时间
} 

大家都知道css代码是要简写的：
过渡简写:

example {
    transition: background-color 2s ease-in 1s;
} 

多项过度：

.example {
    transition:  background-color  2s ease-in 1s,
                 width  2s ease-in-out,
                 height 3s ease-out;
} 

触发事件过渡：----例如  click  hover  类似的事件

、背景过度，一个背景为绿色当鼠标hover时延迟1s过度到蓝色；
.example {
    background-color: green;
    transition: background-color  2s ease-in 1s;
}
.example:hover {
    background-color: blue
} 

、当用户单击并按住元素时，发生宽度属性过渡，因此该元素保持 "活动" 状态。
.example {
    width: 200px;
    height: 200px;
    transition: width  2s ease-in;
}
.example:active {
    width: 400px;
} 

、当你输入元素的时候input会变宽；
input {
    width: 200px;
    transition: width 2s ease-in;
}
input:focus {
    width: 250px;
}  

、可以几个属性同时进行变化；
.example {
    width: 200px;
    height: 200px;
    background:#;
    -webkit-transition: width 2s ease,
      height 2s ease, background 2s ease;
    -webkit-transform: translateZ();
}
.example:hover {
    width: 300px;
    height: 300px;
    background:green;
} 

　　CSS代码：
[css]
#timings-demo {border: 1px solid #ccc;padding: 10px;height: 400px;width: 400px;}
.box {width: 100px;height: 50px;line-height: 50px;text-align: center;color: #fff;margin-bottom: 10px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: inset   5px rgba(, , ,0.5);
}
/*逐渐变慢效果：*/
#ease {background: #f36;
    -webkit-transition: all 5s ease .3s;
}
/*加速效果：*/
#ease-in {background: #;
     -webkit-transition: all 3s ease-in .5s;
}
/*减速效果：*/
#ease-out {background: #;
    -webkit-transition: all 5s ease-out 0s;
}
/*先加速然后减速效果：*/
#ease-in-out {background: #3e6;
    -webkit-transition: all 1s ease-in-out 2s;
}
/*匀速效果：*/
#linear { background: #;
    -webkit-transition: all 6s linear 0s;
}
/*该值允许你去自定义一个时间曲线效果：*/
#cubic-bezier {background: #6d6;
    -webkit-transition: all 4s cubic-bezier 1s;
}
/*hover状态下或单击click按钮后box产生属性变化*/
#timings-demo:hover .box {
    -webkit-transform: rotate(360deg) scale(1.2);
    -webkit-border-radius: 25px;
}