css CSS |过渡持续时间属性

CSS |过渡持续时间属性

原文:https://www . geesforgeks . org/CSS-transition-duration-property/

CSS 中的过渡持续时间属性用于指定完成过渡效果的时间长度(以秒或毫秒为单位)。

语法:

transition-duration: time|initial|inherit;

属性值:

time: It is used to specify the length of time (in seconds or milliseconds) to complete transition animation.

语法:

html transition-duration: time;

示例:

```html <!DOCTYPE html>
                      CSS transition-duration Property
            div {                 width: 100px;                 height: 70px;                 background: green;                 transition-property: width;                 transition-duration: 5s;

/ For Firefox browser /                 -webkit-transition-property: width;                 -webkit-transition-duration: 5s;                 transition-delay: .2s;                 display: inline-block;             }

div:hover {                 width: 300px;             }

GeeksforGeeks

Transition Property


transition-duration: 5s

                                          ```
输出:
- 过渡前:
- 过渡后:
- initial: It is used to set transition-duration property to its default value. The default value of transition-duration is 0.
语法:

html transition-duration: initial;

示例:

```html <!DOCTYPE html>
                      CSS transition-duration Property
            div {                 width: 100px;                 height: 80px;                 background: green;                 transition-property: width;                 transition-duration: initial;

/ For Firefox browser /                 -webkit-transition-property: width;                 -webkit-transition-duration: initial;                 transition-delay: .2s;                 display: inline-block;             }

div:hover {                 width: 300px;             }

GeeksforGeeks

Transition Property


transition-duration: initial;

                                       ```
输出:
- 过渡前:
- 过渡后:
- inherit: The value of transition-duration property set from its parent.
语法:

html transition-duration: inherit;

例 3:

```html <!DOCTYPE html>
                      CSS transition-duration Property
            div {                 width: 100px;                 height: 270px;                 background: green;                 transition-property: width;                 transition-duration: inherit;                 transition-timing-function: ease-in;                                 transition-delay: .2s;                 display: inline-block;             }

div:hover {                 width: 500px;             }

GeeksforGeeks

Transition Property


transition-duration: inherit

                           ```
输出:
- Before Transition:
  
  输出:
- 过渡后: