iT邦幫忙

2025 iThome 鐵人賽

DAY 30
0
Modern Web

HTML&CSS30天修煉系列 第 30

day30Html transition

  • 分享至 

  • xImage
  •  

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;
        }

https://ithelp.ithome.com.tw/upload/images/20251014/20178696SV08889M1O.png
https://ithelp.ithome.com.tw/upload/images/20251014/20178696aiZu4TQMsq.png
https://ithelp.ithome.com.tw/upload/images/20251014/201786960nMQooeyFZ.png
將transition-property:設成all,可以讓全部都呈現轉場效果
transition-timing-function:時間函數,決定了轉場效果的速度
ease:逐漸加速,快結束時減速
ease-out:快結束時減速
ease-in:從慢速開始逐漸加速
ease-in-out:緩慢加速快結束時減速
linear:從頭到尾均速,不加速也不減速
https://ithelp.ithome.com.tw/upload/images/20251014/20178696iVHoYPj30L.png
https://ithelp.ithome.com.tw/upload/images/20251014/20178696JicewT9r8V.png
https://ithelp.ithome.com.tw/upload/images/20251014/20178696PD0xIHGBRT.png
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>

https://ithelp.ithome.com.tw/upload/images/20251014/201786968BxVDcA7CQ.png
cubic-bezier:自訂加減速效果
transition也可以結合成下面那樣來縮減程式碼

transition: all 1s 0.2ms;

上一篇
day29Html transform
系列文
HTML&CSS30天修煉30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言