css3中新增的transform屬性,可以實現元素在變換過程中的過渡效果,實現了基本的
動畫。transition的語法:transition: transition-property || transition-duration ||
transition-timing-funciton || transition-delay ;
其引數的取值說明如下:
:定義用於過渡的屬性;
:定義過渡過程需要的時間(必選,否則不會產生過渡效果)
:定義過渡的方式;
:定義開始過渡的延遲時間;
使用transition屬性定義一組過渡效果,需要以上四個引數。transition屬性可以同時定義
兩組或兩組以上的過渡效果,組與組之間用逗號分隔。
基於webkit核心的私有屬性是:-webkit-transition;
基於gecko核心的私有屬性是:-moz-transition;
基於prestot核心的私有屬性是:-o-transition;
如下例1:過渡效果
圖1:起始效果
圖2:結束效果
圖1所對應的初始**如下:
**1:
當給div增加**2之後,即可實現圖2的效果:
**2:
div:hover
即是div元素實現顏色的變化和以圖形的原點為原心順時針旋轉60度。
1.指定過渡的屬性 (transition-property屬性)
transition-property的語法:transition-property:none | all | ;
其取值說明如下:
none:表示沒有任何css屬性有過渡效果;
all:為預設值,表示所有的css屬性都有過渡效果;
:指定乙個用逗號分隔的多個屬性,針對指定的這些屬性有過渡效果。
若將**1做如下更改,更改之後的**為**3:
**3:
div此時過渡時間將會由1s變化為3s。
3.指定過渡延遲時間(transition-delay):
transition-delay:用於定義過渡的延遲時間;
transition-delay語法:transition-delay:;
其取值說明如下:的取值可以為秒(s)或毫秒(ms)。預設值為0,即是沒有時間延遲,立即開始過渡效果。
可將**1更改為如下的**5:
**5:
div此時的過渡效果將由500ms的延遲更改為延遲到200ms;
4.指定過渡方式(transition-timing-function)
transition-timing-function屬性用於定義過渡的速度曲線,即是過渡方式。
transition-timing-function語法:transition-timing-function: ease | linear | ease-in | ease-out
| ease-in-out | cubiz-bezier(n,n,n,n);
其取值的說明如下:
linear: 表示勻速過渡;
ease: 預設值,表示過渡的速度先慢,再快,最後非常慢;
ease-in: 表示過渡的速度先慢,後越來越快,直至結束;
ease-out: 表示過渡的速度先快,後越來越慢,直至結束;
ease-in-out: 表示過渡的速度在開始和結束時都很慢;
cubic-bezier(n,n,n,n): 自定義貝塞爾曲線的效果,其中的四個引數為從0到1的數字。
CSS3實現過渡效果 transition
css3中新增的transform屬性,可以實現元素在變換過程中的過渡效果,實現了基本的 動畫。功能 實現元素不同狀態之間的平滑過渡。此前 元素 hover狀態 直接切換,從開始狀態到結束狀態,瞬間完成,中間過程幾乎無法檢視。格式 transition 過渡的屬性 完成時間 s 運動曲線 延遲時間 ...
CSS3 過渡效果transition
詳情訪問 所謂的css3當中的transition就是在我們改變現有css的時候出現乙個過渡的效果,例如 請把滑鼠指標放到黃色的 div 元素上,來檢視過渡效果。注釋 本例在 internet explorer 中無效。請把滑鼠指標放到黃色的 div 元素上,來檢視過渡效果。注釋 本例在 inter...
CSS3實現滑鼠hover的過渡效果
我想讓滑鼠放在div上就讓它旋轉變大,離開div後它又恢復本來的樣子。於是我就想寫乙個js,監聽乙個hover事件,當hover發生的時候,觸發乙個計時器,在計時器裡寫兩個值,乙個管角度,乙個管寬度,隨著時間的變化逐漸增加,不斷地重寫div的style。當達到我期望的limit的值後讓它停止 或者乾...