整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS3 transition屬性允許CSS元素的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。我們可以在不使用 Flash 動畫或 JavaScript 的情況下，在元素從一種樣式變換為另一種樣式時為元素添加效果。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變 CSS 的屬性值。接下來就一起去看看這個CSS3屬性吧!
一、CSS3的transition屬性
transition屬性的作用就是指定當(dāng)你的元素某些樣式發(fā)生變化時，這些樣式可以漸漸過渡到最終屬性值。transition屬性是一個簡寫的復(fù)合屬性，其中包含了四個過渡屬性。
1、transition 簡寫的復(fù)合屬性，用于在一個屬性中設(shè)置四個過渡屬性。
2、transition-property 規(guī)定應(yīng)用過渡的CSS屬性的名稱。
3、transition-duration 定義過渡效果花費(fèi)的時間，默認(rèn)是0。
4、transition-timing-function 規(guī)定過渡效果的時間曲線，默認(rèn)是"ease"。
5、transition-delay 規(guī)定過渡效果何時開始，默認(rèn)是0。
transition-property 用于產(chǎn)生過渡動畫的單個或多個屬性，或者過渡所有屬性的關(guān)鍵字all。
transition-duration 漸變時間屬性值為 “數(shù)值+s” ，代表多少時間完成過渡效果。
transition-timing-function 是可選屬性值。
有如下可選值
1、linear線性過渡，ease(默認(rèn))平滑過渡，ease-in由慢到快、由快到慢，ease-in-out由慢到快再到慢，
2、step-start等同 steps(1, start)，step-end等同 steps(1, end)
3、steps()兩個參數(shù)的步進(jìn)函數(shù)。第一個參數(shù)為正整數(shù)，指定函數(shù)步數(shù)。第二個參數(shù)取值是start或end，指定每一步的值發(fā)生變化的時間點(diǎn)。第二個參數(shù)可選，默認(rèn)值為end。
4、cubic-bezier(num, num, num, num)特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內(nèi)。
transition-delay可選屬性值，設(shè)置延遲過渡(即設(shè)置多少時間后再開始過渡)，延遲的時間值為“數(shù)值+s”。該屬性可以對多個不同的屬性進(jìn)行設(shè)置，用逗號隔開。
二，可用于過渡的屬性
不是所有的樣式都可以過渡，如說display:block不能過渡到display:inline-block。那么具體有哪些屬性可以用于過渡呢？下面列舉了部分可以用于過渡的屬性
部分可用于過渡的屬性示意圖
三、兼容性
transition屬性瀏覽器兼容性
transition屬性瀏覽器兼容性
注：Internet Explorer 9 以及更早的版本不支持 transition 屬性，且Chrome 25 以及更早的版本，需要前綴 -webkit-。
使用過渡屬性而不是腳本的另一個原因是腳本方法改變多個元素樣式可能會產(chǎn)生沖突，transition過渡屬性就不需要考慮這個問題元素與元素之間互不影響。元素過渡需要知道樣式具體的起始屬性和末尾屬性，如寬度從10px變化到100px。
四、transition屬性的運(yùn)用
示例一
控制單個屬性（如width）過渡
改變單個屬性示例
示例二
控制多個屬性(如transform,background,background,height)過渡。
element{
-webkit-transition:-webkit-transform 5s,background 5s,width 5s,height 5s;
-moz-transition-property:width,height,-o-transform,background,;
-moz-transition-duration:5s,5s,5s,5s;
-o-transition-property:width,height,-o-transform,background;
-o-transition-duration:5s,5s,5s,5s;
transition-property:width,height,transform,background;
transition-duration:5s,5s,5s,5s;
}
感謝您閱讀了這篇文章，希望會對您有所幫助。喜歡我就關(guān)注我吧，后面的文章內(nèi)容會越來越精彩喔！
天就來分享一些網(wǎng)頁中會用到的展示的小效果
很多欄目的邊框當(dāng)鼠標(biāo)移上去的時候，邊框會有移動的色澤變化，有順時針過渡或者逆時針過渡的效果
下面看看效果：
實(shí)現(xiàn)代碼：
SS實(shí)現(xiàn)一個高度過度的動畫 ，針對于屬性height，設(shè)置一個transition動畫就能實(shí)現(xiàn)我們想要看到的效果。而這個高度在實(shí)際情況下， 我們并不希望它是一個固定的值，需要做的更靈活一點(diǎn)，比如隨著內(nèi)容的增減自適應(yīng)，所以，有人就會想到使用transition將高度從0過度到auto，然而，這樣實(shí)現(xiàn)動畫效果會生效嗎？有沒有更優(yōu)秀的技巧或者方法了？
有的，今天和大家聊一聊這個問題。
文章中講解的DOM結(jié)構(gòu)，如下
效果如下，鼠標(biāo)移上去的時候，下面這段文字展示（<mark>動畫效果</mark> ）
默認(rèn)的時候高度設(shè)置成0，鼠標(biāo)移上去的時候，將高度設(shè)置成auto，像下面代碼這樣
從效果上來看，這個變化是瞬間的，并沒有500毫秒過度效果。也就是說CSS不能使用transition實(shí)現(xiàn)height從0過度到auto。
這不符合我們的預(yù)期效果。
竟然auto不能動畫過度，那我們就改成固定的值（最簡單的就是改成數(shù)字），比如，從0過度到300。這樣過度效果就生效了。
雖然這樣能過度過去，但這不是一個很優(yōu)的方法， 因為這樣處理的話，我們得通過JS去計算這個高度，才能確保我們的功能不出BUG。
為什么不試一下最大高度了？
max-height從0到固定值也是可以animation過去的，唯一不太好的地方就是，我們的內(nèi)容有可能會溢出，畢竟我們設(shè)置的只是一個最大的高度。
如果需求能保證內(nèi)容的高度永遠(yuǎn)不會達(dá)到一定的值，用這個方法完全沒什么問題。我們只需要設(shè)置一個適當(dāng)?shù)淖畲蟾叨戎稻秃谩?/p>
這個時候，網(wǎng)格布局給我們提供了另外一個巧妙的解決方案。
只需要將grid-template-rows從0fr過度到1fr。如此一來，我們的網(wǎng)格項將從0過渡到其'自然'高度。這應(yīng)該就是比較完美的解決辦法。
代碼如下
功能是實(shí)現(xiàn)了，我也不得不關(guān)注一下這屬性的兼容性問題。
注意到chrome從107版本開始支持這個屬性。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
