transition-duration 屬性——動畫示例
- 2019 年 11 月 26 日
- 筆記
用途
transition-duration 屬性以秒或毫秒為單位規定過渡動畫所需的時間。默認值為 0s ，表示不出現過渡動畫。
語法
/* <time> 值 */ transition-duration: 3s; transition-duration: 60ms; transition-duration: 1s, 5s; transition-duration: 2s, 8s, 16ms; /* 全局值 */ transition-duration: inherit; transition-duration: initial; transition-duration: unset;
值
|
值 |
描述 |
|---|---|
|
<time> |
過渡屬性從舊的值轉變到新的值所需要的時間。默認是 0s ，表示不會呈現過渡動畫，屬性會瞬間完成轉變。不接受負值。 |
例子
/* HTML */ <div class="stage"></div> <p>請把滑鼠移動到紅色色的 div 元素上，可以看到過渡效果。</p> <p><b>注釋：</b>過渡效果會在開始前等待兩秒鐘。</p> /* CSS */ .stage{ width:100px; height:100px; background:red; transition-property: width;transition-duration:5s;//過渡效果的持續時間。 transition-delay:2s;//過渡效果會在開始前等待兩秒鐘。}
執行結果
