CSS3過渡特性實現淡入淡出效果

屬性說明:

transition-property:定義應用過渡效果的CSS屬性;
transition-duration:定義過渡效果執行的時間;
transition--delay:定義過渡操作之前的等待時間;
transition-timing-function:指定過渡過程的中間值如何規定;

其中在指定過渡過程的中間值時可以使用術語也可以使用三次貝塞爾曲線函數

術語解釋:
linear:勻速過渡
ease-in:加速
ease-out:減速
ease-in-out:先加速后減速
ease:曲線與ease-in-out差不多,但畫面加速比ease-in-out快

三次貝塞爾曲線函數說明:
該函數用四個點來描述曲線的變化
(0.0,0.0) (a,b) (c,d) (1.0,1.0)

術語與函數數值的對應
linear:     (0.0,0.0) (0.0,0.0) (1.0,1.0) (1.0,1.0)
ease-in:    (0.0,0.0) (0.42,0.0) (1.0,1.0) (1.0,1.0)
ease-out:   (0.0,0.0) (0.0,0.0) (0.58,1.0) (1.0,1.0)
ease-in-out:(0.0,0.0) (0.42,0.0) (0.58,1.0) (1.0,1.0)

第一種方式:用術語
input[type="email"],.login input[type="password"]{
	transition-timing-function:linear;
	transition-property:background,border;
 	transition-duration:0.3s;
}

第二種方式:用函數
/*因為在三次貝塞爾曲線函數中第一個和第四個點的坐標是確定的,因此此函數中定義的是第二三個點的坐標*/

div{
	transition-property:left;
	transition-timing-function:cubic-bezier(0.1,-0.6,0.2,0);
	tansiton-duration:1s;
}
div:hover{
	left:200px;
}

如果要讓所有的瀏覽器都兼容CSS3的過渡效果則應添加其它前綴,不過這會讓代碼看起來很多,因此可以寫為如下簡潔樣式

/*對多個屬性應用過渡時用逗號隔開*/
.login input[type="email"],.login input[type="password"]{
	-webkt-transition:background 0.3s linear,
		          border 0.3s linear;
	  -moz-transition:background 0.3s linear,
		          border 0.3s linear;
	    -o-transition:background 0.3s linear,
		          border 0.3s linear;
	       transition:background 0.3s linear,
		          border 0.3s linear;
}