编辑“︁CSS过渡属性”︁（章节）

== 过渡属性详解 ==

=== transition-property ===
该属性指定哪些CSS属性会应用过渡效果。可以指定单个属性或多个属性（用逗号分隔）。如果希望所有可过渡的属性都应用过渡效果，可以使用关键字 '''all'''。

<syntaxhighlight lang="css">
/* 单个属性 */
transition-property: opacity;

/* 多个属性 */
transition-property: opacity, transform;

/* 所有可过渡属性 */
transition-property: all;
</syntaxhighlight>

=== transition-duration ===
定义过渡效果的持续时间，单位为秒（s）或毫秒（ms）。默认值为0，表示没有过渡效果。

<syntaxhighlight lang="css">
/* 1秒的过渡 */
transition-duration: 1s;

/* 500毫秒的过渡 */
transition-duration: 500ms;
</syntaxhighlight>

=== transition-timing-function ===
控制过渡的速度曲线，即属性值随时间变化的方式。常见的值包括：
* '''linear'''：匀速过渡。
* '''ease'''（默认值）：慢速开始，中间加速，慢速结束。
* '''ease-in'''：慢速开始，逐渐加速。
* '''ease-out'''：快速开始，逐渐减速。
* '''ease-in-out'''：慢速开始和结束，中间加速。
* '''cubic-bezier(n,n,n,n)'''：自定义贝塞尔曲线。

<syntaxhighlight lang="css">
transition-timing-function: ease-in-out;
</syntaxhighlight>

=== transition-delay ===
定义过渡效果开始前的延迟时间，单位为秒（s）或毫秒（ms）。默认值为0，表示立即开始。

<syntaxhighlight lang="css">
/* 延迟0.5秒后开始过渡 */
transition-delay: 0.5s;
</syntaxhighlight>

=== 简写属性 transition ===
以上四个属性可以通过 '''transition''' 简写属性一次性定义，语法如下：
<syntaxhighlight lang="css">
transition: [property] [duration] [timing-function] [delay];
</syntaxhighlight>

示例：
<syntaxhighlight lang="css">
/* 定义opacity属性的过渡，持续1秒，使用ease-in-out速度曲线，延迟0.5秒 */
transition: opacity 1s ease-in-out 0.5s;

/* 定义多个属性的过渡 */
transition: opacity 1s ease-in-out, transform 0.5s linear;
</syntaxhighlight>