css中過(guò)渡如何實(shí)現(xiàn)

小編給大家分享一下css中過(guò)渡如何實(shí)現(xiàn)，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

注意：IE9及更早IE版本不支持過(guò)渡！Safari流量器寫(xiě)法要加-webkit-的前綴等！

一、transition(過(guò)渡)是指為了添加鼠標(biāo)移到某種元素時(shí)，其可以從一種樣式轉(zhuǎn)變到另一種樣式。

二、實(shí)現(xiàn)方法：

1、指定樣式

.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

2、調(diào)用樣式

.panel{
    -webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;

2.指定效果持續(xù)時(shí)間（時(shí)間默認(rèn)為零，若不指定，則沒(méi)有效果）。

三、語(yǔ)法：transition：property duration timing-function delay;

逐項(xiàng)分析每個(gè)屬性寫(xiě)法:

1、transition-property（指定css屬性）:none(沒(méi)有屬性會(huì)獲得過(guò)渡效果);all（默認(rèn)，所有屬性都將獲得過(guò)渡效果）;property（定義應(yīng)用過(guò)渡效果的css屬性名稱列表以逗號(hào)分隔）;

2、transition-duration（規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間）:time（規(guī)定完成過(guò)渡效果要花的時(shí)間，默認(rèn)為0）；

3、transition-timing-function（指定切換效果的速度）:linear（規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果）；ease（默認(rèn)，規(guī)定慢速開(kāi)始然后變快，然后慢速結(jié)束的過(guò)渡效果）；ease-in（規(guī)定以慢速開(kāi)始的過(guò)渡效果）；ease-out（規(guī)定以慢速結(jié)束的過(guò)渡效果）；ease-in-out（規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果）；cubic-bezier（n,n,n,n）(在cubic-bezier函數(shù)中定義自己的值，可能的只是0-1之間的數(shù)值)

4、transition-delay（指定何時(shí)將開(kāi)始切換效果）:time（指定秒或毫秒數(shù)之前要等待切換效果開(kāi)始，默認(rèn)值0）

看完了這篇文章，相信你對(duì)css中過(guò)渡如何實(shí)現(xiàn)有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！