溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中過渡如何實現，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
注意：IE9及更早IE版本不支持過渡！Safari流量器寫法要加-webkit-的前綴等！
一、transition(過渡)是指為了添加鼠標移到某種元素時，其可以從一種樣式轉變到另一種樣式。
二、實現方法：
1、指定樣式
.panel:target{
margin-top: 0%;
background-color: #ffcb00;
}2、調用樣式
.panel{
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;2.指定效果持續時間（時間默認為零，若不指定，則沒有效果）。
三、語法：transition：property duration timing-function delay;
逐項分析每個屬性寫法:
1、transition-property（指定css屬性）:none(沒有屬性會獲得過渡效果);all（默認，所有屬性都將獲得過渡效果）;property（定義應用過渡效果的css屬性名稱列表以逗號分隔）;
2、transition-duration（規定完成過渡效果需要花費的時間）:time（規定完成過渡效果要花的時間，默認為0）；
3、transition-timing-function（指定切換效果的速度）:linear（規定以相同速度開始至結束的過渡效果）；ease（默認，規定慢速開始然后變快，然后慢速結束的過渡效果）；ease-in（規定以慢速開始的過渡效果）；ease-out（規定以慢速結束的過渡效果）；ease-in-out（規定以慢速開始和結束的過渡效果）；cubic-bezier（n,n,n,n）(在cubic-bezier函數中定義自己的值，可能的只是0-1之間的數值)
4、transition-delay（指定何時將開始切換效果）:time（指定秒或毫秒數之前要等待切換效果開始，默認值0）
看完了這篇文章，相信你對css中過渡如何實現有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
