css裡有個transition屬性,它可以讓物件呈現轉場的效果,不會是直接變大變小那麼突兀,當div被滑鼠蓋上時,改變背景色與高度,下面用transition來呈現轉場的效果,
transition-property:要呈現轉場的屬性,這裡輸入background-color,所以高度會直接改變但是背景色會呈現漸變的效果
transition-duration:轉場所耗的時間,時間設定越短就越快完成效果,時間有秒(s)和毫秒(ms)可以使用
transition-delay:延遲時間,會延緩幾秒才呈現轉場效果,一樣有s和ms可以使用
div {
height: 100px;
line-height: 100px;
text-align: center;
background-color: rgb(0,154,255);
color: #ff00a6;
transition-property: background-color;
transition-duration: 1s;
transition-delay: 0.5s;
}
div:hover {
background-color: yellow;
height:100vh;
line-height: 100vh;
}
將transition-property:設成all,可以讓全部都呈現轉場效果
transition-timing-function:時間函數,決定了轉場效果的速度
ease:逐漸加速,快結束時減速
ease-out:快結束時減速
ease-in:從慢速開始逐漸加速
ease-in-out:緩慢加速快結束時減速
linear:從頭到尾均速,不加速也不減速
steps(數字),照著數字來決定動幾次完成
step-start:直接結束
step-end:等待transition-duration時間後結束
<div style="transition-timing-function: steps(5);">steps(5)</div>
<div style="transition-timing-function: step-start;">step-start</div>
<div style="transition-timing-function: step-end;">step-end</div>
cubic-bezier:自訂加減速效果
transition也可以結合成下面那樣來縮減程式碼
transition: all 1s 0.2ms;