如何理解并掌握CSS3 transition的使用方法

CSS3中的transition属性是实现样式平滑过渡的核心工具，它可以让元素在样式值发生变化时，自动产生渐变动画效果，大大简化了前端交互动画的实现成本，不需要依赖JavaScript的定时器或者复杂的动画库。

transition的核心语法

transition是一个简写属性，它包含了四个子属性，我们既可以使用简写形式统一配置，也可以单独设置每个子属性的取值。

子属性说明

简写语法格式

简写属性的格式为：transition: property duration timing-function delay;，其中duration是必须设置的属性，其他属性可以按需省略，省略时取默认值。

常见使用场景示例

按钮hover过渡效果

这是最常见的使用场景，当鼠标悬停在按钮上时，让按钮的背景色和尺寸平滑变化，提升交互体验。

/* 按钮基础样式 */
.btn {
  width: 120px;
  height: 40px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  /* 配置过渡效果：所有可过渡属性，持续0.3秒，速度曲线为ease，无延迟 */
  transition: all 0.3s ease;
}

/* 鼠标悬停时的样式 */
.btn:hover {
  background-color: #66b1ff;
  width: 130px;
  transform: scale(1.05);
}

元素显示隐藏过渡

很多场景下需要元素显示隐藏时带有过渡效果，注意如果要过渡display属性是不生效的，通常需要配合opacity和visibility属性使用。

/* 隐藏状态的盒子 */
.hide-box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  opacity: 0;
  visibility: hidden;
  /* 过渡opacity和visibility属性，持续0.5秒 */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 显示状态的盒子 */
.show-box {
  opacity: 1;
  visibility: visible;
}

使用注意事项

• 只有CSS属性的值是连续的数值或者状态变化时，transition才会生效，比如从width:100px到width:200px，或者opacity从0到1，而像display从none到block这种非连续变化是无法过渡的。
• 如果设置transition-property为all，那么元素所有可过渡的属性发生变化时都会产生动画，可能会影响性能，建议按需指定需要过渡的属性。
• transition-timing-function如果使用cubic-bezier()自定义曲线，需要传入四个0到1之间的数值，比如cubic-bezier(0.2, 0.8, 0.4, 1)。
• 当元素的样式变化是通过添加删除class实现时，建议在初始样式上设置transition，而不是在变化后的样式上设置，否则回退动画可能不会生效。

多属性分别配置示例

如果希望不同属性的过渡时间和曲线不一样，可以单独设置每个子属性，或者简写时用逗号分隔不同的配置。

/* 多属性分别配置过渡效果 */
.card {
  width: 200px;
  height: 150px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /* 宽度过渡0.5秒，背景色过渡0.3秒，阴影过渡0.4秒，都无延迟 */
  transition: width 0.5s ease, background-color 0.3s linear, box-shadow 0.4s ease-in;
}

.card:hover {
  width: 220px;
  background-color: #f5f7fa;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

CSS3transition过渡动画属性配置前端样式修改时间：2026-06-04 02:54:30