示例效果
屬性介紹
transition-property
transition-property定義應用過渡效果的CSS屬性名稱,默認值all
,表示所有屬性都獲得過渡效果;屬性值none
表示沒有屬性獲得過渡效果;property
規定應用過渡效果的CSS屬性。
過渡屬性可以是多個值,多個屬性之間用逗號間隔。
示例:transition-property: opacity, width;
並不是所有CSS屬性都有過渡效果,只有具有中間值的屬性才有效果,一般來說屬性值可以為數值的均可獲得過渡。
transition-duration
transition-duration定義完成過渡的時長,默認值0s,屬性值為秒或毫秒
transition-timing-function
transition-timing-function定義過渡動畫函數。默認值ease,表示慢速開始,然后變快,慢速結束;linear表示勻速運動;ease-in表示慢速開始(慢到快);ease-out表示慢速結束(快到慢);ease-in-out表示慢速開始和結束(慢到快到慢);cubic-bezier(x1, y1, x2, y2)自定義貝塞爾運動曲線。
關於貝塞爾曲線可參考這篇文章:貝塞爾曲線掃盲
貝塞爾曲線:
過渡效果的貝塞爾曲線通過四個點來控制,繪制的是三次貝塞爾曲線,其中p0表示(0,0), p3表示(1,1)。transition-timing-function屬性通過確定p1(x1, y1)和p2(x2,y2)的坐標值來確定曲線值,x1,y1,x2,y2都是0到1范圍內的值(包括0和1)
在線獲取貝塞爾曲線值
過渡原理:
Vstart = 屬性起始值; Vend = 屬性結束值; Vres = 中間值; p = 過渡動畫函數輸出值
Vres = (1 - p) * Vstart + p * Vend
Vres就是根據曲線動畫計算出的不同時刻CSS屬性值
steps步進函數:
transition-timing-function屬性值除了可以為關鍵字和貝塞爾函數,還可以是steps步進函數,平時用到的情況很少,我能想到的就是進度條效果。steps步進函數將過渡事件划分為大小相等的時間間隔來運行,它有兩個參數:
steps(<integer>[,start | end]?)
第一個參數指定間隔數,值為正整數;第二個參數可選,默認值end,可選值start。參數end可簡單理解為第一幀是第一步開始,參數start表示第一幀是第一步結束。
示例中的例1和例2比較了這兩種效果,當鼠標放到第一個元素上時,步進分三次到達終點,每次中間間隔時間一樣,當鼠標放到第二元素上時,元素瞬間完成第一次步進,后兩次間隔時間一樣
transition-delay
過渡效果等待時間,默認值0s,屬性值秒或毫秒
transition
transition定義元素的過渡效果,它是以下幾個屬性的簡寫:
transition-property
transition-duration
transition-timing-function
transition-delay
默認值all 0s ease 0s
多值
上面介紹了transition的基本屬性,transition可以定義多個屬性值一起參與過渡:
.test {
transition: width 2s linear 100ms, opacity 2s ease 100ms;
}
// 等同於
.test {
transition-property: width, opacity;
transition-duration: 2s;
transition-timing-function: linear, ease;
transition-delay: 100ms;
}
.test1 {
transition: width 2s linear 100ms, height 1s ease 0s, opacity 2s linear 100ms;
}
// 等同於
.test1 {
transition-property: width, height, opacity;
transition-duration: 2s, 1s;
transition-timing-function: linear, ease;
transition-delay: 100ms, 0s;
}
當transition-property的數量多於對應的transition-delay | transition-timing-function | transition-duration
的屬性值(屬性值的個數大於1個)時,將按順序開始取值
過渡階段
過度分為前進(forward)和反向(reverse)兩個階段,若前進階段進行一段時間后進入反向階段,則反向階段的初始值是前進階段結束時的瞬間值。
以hover為例,當元素在非hover狀態時設置transition,則前進和方向過渡效果是一樣的;當在元素hover狀態時設置transition,則前進狀態是hover時設置的為准,反向狀態是非hover時設置的為准
例3和例4對比了兩種效果:把鼠標放到例3中的盒子上在移開,前進和反向動畫一樣,把鼠標放到例4中的盒子上再移開,前進有過渡動畫,反向就沒有了。
例5演示了設置前進和反向不同時間的過渡動畫
觸發方式
過渡觸發方式有三種:偽類觸發、媒體查詢和JavaScript觸發。
偽類觸發
例5演示了hover觸發。
例6演示了focus觸發,鼠標常按可查看過渡效果。
例7演示了active觸發。
媒體查詢
@media (max-width: 1000px){
.test{
width: 300px;
}
}
JS觸發
test.onclick = function(){
test.style.width = '300px';
setTimeout(function(){
test.style.width = '100px';
},2000);
}