2024年5月12日发(作者：果颖馨)

transition在css中的用法

Transition在CSS中的用法

简介：

Transition是CSS3中的一个属性，用于设置元素在不同状态之间的

过渡效果。通过定义过渡的属性、持续时间、延迟时间和过渡函数等

参数，可以实现元素在改变样式时平滑地过渡。

基本语法：

transition: property duration timing-function delay;

参数解析：

1. property：指定要过渡的CSS属性，可以是单个属性或多个属性组

合。多个属性之间以逗号分隔。

2. duration：指定过渡效果持续的时间，单位可以是秒（s）或毫秒

（ms）。

3. timing-function：指定过渡效果的速度曲线。常见的取值有linear

（匀速）、ease（慢快慢）、ease-in（慢入）、ease-out（慢出）等。

4. delay：指定过渡效果开始前的延迟时间，单位可以是秒（s）或毫

秒（ms）。

用法示例：

1. 过渡单个属性

```

div {

width: 100px;

height: 100px;

background-color: red;

transition: width 1s ease-in-out;

}

div:hover {

width: 200px;

}

```

上述代码中，当鼠标悬停在div元素上时，宽度会从100px平滑地过

渡到200px，过渡持续1秒，并且速度曲线为慢快慢。

2. 过渡多个属性

```

div {

width: 100px;

height: 100px;

2024年5月12日发(作者：果颖馨)

transition在css中的用法

Transition在CSS中的用法

简介：

Transition是CSS3中的一个属性，用于设置元素在不同状态之间的

过渡效果。通过定义过渡的属性、持续时间、延迟时间和过渡函数等

参数，可以实现元素在改变样式时平滑地过渡。

基本语法：

transition: property duration timing-function delay;

参数解析：

1. property：指定要过渡的CSS属性，可以是单个属性或多个属性组

合。多个属性之间以逗号分隔。

2. duration：指定过渡效果持续的时间，单位可以是秒（s）或毫秒

（ms）。

3. timing-function：指定过渡效果的速度曲线。常见的取值有linear

（匀速）、ease（慢快慢）、ease-in（慢入）、ease-out（慢出）等。

4. delay：指定过渡效果开始前的延迟时间，单位可以是秒（s）或毫

秒（ms）。

用法示例：

1. 过渡单个属性

```

div {

width: 100px;

height: 100px;

background-color: red;

transition: width 1s ease-in-out;

}

div:hover {

width: 200px;

}

```

上述代码中，当鼠标悬停在div元素上时，宽度会从100px平滑地过

渡到200px，过渡持续1秒，并且速度曲线为慢快慢。

2. 过渡多个属性

```

div {

width: 100px;

height: 100px;