首頁  >  文章  >  web前端  >  深入理解CSS3中transition的使用方法

深入理解CSS3中transition的使用方法

yulia
yulia原創
2018-09-11 16:01:172186瀏覽

可以讓動畫在CSS層面實現,此時不是利用setInterval(),不是定時器,而是底層C 在渲染,渲染動畫的品質、絲滑程度都要遠遠優於JS、jQuery。

要顛覆我們傳統製作網頁動畫的思維模式,現在的手機頁面中,絕對不會有任何動畫是setInterval()完成的,而都是過渡實現的。今後2~3年,PC端也會這樣,過渡會淘汰setInterval()和animate函數。

語法:transition: property duration timing-function delay;時間的單位是:秒(s)。

transition-property 指定CSS屬性的name,transition效果 none 沒有屬性會獲得過渡效果。 all 所有屬性將獲得過渡效果。 property 定義套用過渡效果的 CSS 屬性名稱列表,列表以逗號分隔。 transition-duration transition效果需要指定多少秒或毫秒才能完成 規定完成過渡效果所需花費的時間(以秒數或毫秒計)。預設值是 0,表示不會有效果。

transition-timing-function指定transition效果的轉速曲線

linear 以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。
ease 慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。
ease-out 以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。
ease-in-out 以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
transition-delay 定義transition效果開始的時候 指定秒數或毫秒數之前要等待切換效果開始

什麼屬性可以參與過渡?

幾乎所有的CSS屬性都能過渡。
JQuery transition
background-color
background-position
background-image
任何的變形transform都能夠過渡

過渡動畫的觸發條件?

任何改變CSS的情況,都會觸發過渡。例如:hover、加減類、乾脆直接設定CSS。
例如:
直接設定CSS會引發過渡動畫:

document.getElementById("box").style.width = "300px";

類別名稱的改變會引發過渡動畫:

document.getElementById("box").className = "long";

特別注意: transition 不能繼承。

以上是深入理解CSS3中transition的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn