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;//过渡效果会在开始前等待两秒钟。}
执行结果
