transition Css3过度详解

浏览数：48 / 时间：2015年06月09日

过度语法：

.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  类似的事件

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


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

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

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