CSS过渡属性与参数

CSS过渡由四个核心属性控制，掌握每个属性的参数配置是实现复杂动画的关键。

transition-property

指定参与过渡的CSS属性名称。

语法

transition-property: none | all | property-name;

参数值

示例

/* 单个属性 */
transition-property: width;

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

/* 所有属性 */
transition-property: all;

transition-duration

设置过渡动画的持续时间。

语法

transition-duration: time;

参数值

示例

transition-duration: 0.3s;
transition-duration: 300ms;

/* 多个属性不同时长 */
transition-property: width, height;
transition-duration: 0.3s, 0.5s;

建议使用 s 单位，数值更直观。

transition-timing-function

定义过渡的速度曲线，控制动画节奏。

语法

transition-timing-function: keyword | cubic-bezier();

内置关键字

自定义贝塞尔曲线

transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

阶梯函数

/* 分2步完成，结束时变化 */
transition-timing-function: steps(2, end);

/* 分3步完成，开始时变化 */
transition-timing-function: steps(3, start);

transition-delay

设置过渡开始的延迟时间。

语法

transition-delay: time;

示例

/* 延迟0.2秒后开始 */
transition-delay: 0.2s;

/* 负值：动画从中间开始 */
transition-delay: -0.1s;

多属性延迟

transition-property: width, height, opacity;
transition-duration: 0.3s;
transition-delay: 0s, 0.1s, 0.2s;

延迟为负值时，动画跳过对应时长直接开始。

简写属性

transition 简写按顺序组合四个属性：

transition: property duration timing-function delay;

示例

/* 单个属性 */
transition: width 0.3s ease 0.1s;

/* 多个属性 */
transition:
  width 0.3s ease,
  height 0.5s ease-in 0.1s,
  opacity 0.2s linear;

完整示例

.card {
  transform: scale(1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

要点总结

• transition-property 指定过渡属性，all 为所有可过渡属性
• transition-duration 设置动画时长，必须指定单位
• transition-timing-function 控制速度曲线，ease 为默认值
• transition-delay 设置延迟，负值可跳过部分动画
• 简写顺序：属性 → 时长 → 缓动 → 延迟