iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 9

讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (二)

在:hover、:active的CSS設定中,當然也可以加上animation,當事件觸發時開始播放定義好的@keyframes。

除了animation,還有可以非常簡單讓CSS屬性轉換時,能具有「轉換」的時間過程,讓這樣的變化更加順暢不再生硬。

那就是 transition(轉場) 屬性啦!

像是透過JavaScript或是上一篇提到的:hover等偽元素,當網頁元件發生CSS的項目變化時,如果沒有特別在transition做指定,他的變化就是立刻轉換,而利用transition即可控制CSS屬性轉換的時間,以及速率變化(如同animation所做的時間與速度控制)。

與animation相同,transition也具有數個子屬性:

  • transition-property: 定義哪些 CSS 屬性會被 transition 效果影響,多個屬性可用逗號隔開,或使用all則可套用在所有屬性上面。
  • transition-duration: 定義 transition 所花費的時間;以時間作為單位,常用秒s或毫秒ms。
  • transition-timing-function: 定義變化的速率;預設值為linear(平均速率變化),另外可以使用step、cubic-bezier和定義好的ease/ease-in/ease-out/ease-in-out。
  • transition-delay: 定義多久之後開始執行,可以產生延遲效果;以時間作為單位,常用秒s或毫秒ms。
.my-div {
    color: white;
    background:#333;
    transition-property:all;
    transition-duration:3s;
    transition-timing-function:ease;
}
.my-div:hover {
    color: #333;
    background:white;
}

除了使用子屬性外,也可全部寫在 transition 中:

transition: property duration timing-function delay;

備註:property 和 duration 為必要值。


上一篇
讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (一)
下一篇
讓按鈕來個酷動態!操縱DOM事件:JavaScript篇 (一)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言