溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Transition的過渡是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
通過過渡transition，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫交互效果。過渡屬性看似簡單，但實際上它有很多需要注意的細節和容易混淆的地方。本文將介紹和梳理關于CSS過渡的知識
transition定義
過渡transition是一個復合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成一個完整的過渡效果
transition-property:過渡屬性(默認值為all)
transition-duration:過渡持續時間(默認值為0s)
transiton-timing-function:過渡函數(默認值為ease函數)
transition-delay:過渡延遲時間(默認值為0s)
[注意]IE9-不支持該屬性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前綴；而其余高版本瀏覽器支持標準寫法
transition代碼
.test{
height:100px;
width:100px;
background-color:pink;
transition-duration:3s;
/*以下三值為默認值，稍后會詳細介紹*/
transition-property:all;
transition-timing-function:ease;
transition-delay:0s;
}
.test:hover{
width:500px;
}
復制代碼
<divclass="test"></div>
//鼠標移動到元素上，會出現寬度變化效果
看完上述內容，你們對Transition的過渡是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
