Skip to content

Latest commit

 

History

History
33 lines (16 loc) · 770 Bytes

6.2-transition-property.md

File metadata and controls

33 lines (16 loc) · 770 Bytes

7.2 transition-property

說明

指定某一個 css 屬性,套用轉場效果,例如寬度( width )在 A 狀態是 100px,而 B 狀態是 200px,那轉場效果就會是寬度從 100px 漸進增加至 200px。

常見可設定的值

  • all:這是預設,會試圖將所有可以轉場效果的 css 屬性,都直接套用。
  • property:這裡是指特定 css 屬性套用轉場效果,例如 width、transform、opacity 等,只要是可以形成數值變化的都可以。

以上例的大正方形變小圓形為例,可將以下這行:

transition: border-radius 2s, width 2s, height 2s;

換成:

transition: all 2s;

例:

{% embed url="https://codepen.io/carlos411/pen/JjwPWKw" %}