当前位置：首页 > news >正文

CSS transition(过渡效果)详解

news 2025/8/12 6:54:03

CSS过渡效果（Transition）是一种在CSS3中引入的动画效果，它允许开发者在元素状态变化时（如鼠标悬停、类更改等）平滑地改变CSS属性值，从而创建出平滑的动画效果。过渡效果可以应用于多种CSS属性，如颜色、尺寸、位置等。以下是CSS过渡效果的主要属性及其详解：

transition-property：这个属性指定了哪些CSS属性应该应用过渡效果。你可以指定一个或多个属性，用逗号分隔。如果设置为all，则所有可过渡的属性都会应用过渡效果。默认值是all。

示例：
```
div { transition-property: width, height; }
```
transition-duration：这个属性定义了过渡效果的持续时间，即从旧值到新值的过渡过程需要多少时间。时间单位可以是秒（s）或毫秒（ms）。默认值是0s，表示没有过渡效果。

示例：
```
div { transition-duration: 0.5s; }
```
transition-timing-function：这个属性定义了过渡效果的速度曲线，即过渡过程中中间值是如何计算的。它决定了过渡效果的加速和减速模式。常见的值有linear（线性）、ease（默认，先慢后快）、ease-in（慢速开始）、ease-out（快速结束）、ease-in-out（慢速开始和结束）等。你也可以使用cubic-bezier()函数来创建自定义的缓动曲线。

示例：
```
div { transition-timing-function: ease-in-out; }
```
transition-delay：这个属性定义了过渡效果开始前的延迟时间。正值表示延迟，负值表示过渡效果从负值的绝对值时刻开始。默认值是0s。

示例：
```
div { transition-delay: 1s; }
```
transition：这是一个简写属性，可以同时设置上述四个属性。如果只设置一个值，它将应用于所有属性。如果设置多个值，每个值对应一个属性，顺序是transition-property、transition-duration、transition-timing-function、transition-delay。

示例：
```
div { transition: width 0.5s ease-in-out 1s; }
```