transition属性的基本用法

transition属性是CSS中用于实现元素状态平滑过渡的重要工具，通过定义过渡效果的时间、属性和速度曲线，可以让元素的变化更加自然流畅。下面从多个角度详细解析其用法。

transition-property：指定过渡属性

transition-property用于定义哪些CSS属性需要应用过渡效果。可以指定单个属性，也可以使用all关键字表示所有属性。

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition-property: width, height;
}

.box:hover {
  width: 200px;
  height: 150px;
}

在这个例子中，只有width和height属性会应用过渡效果。如果改为transition-property: all，则所有可过渡属性都会生效。

transition-duration：设置过渡时间

transition-duration定义过渡效果持续的时间，单位可以是秒(s)或毫秒(ms)。

.button {
  background: #3498db;
  transition-property: background;
  transition-duration: 0.3s;
}

.button:hover {
  background: #2ecc71;
}

多个属性的过渡时间可以分别设置：

.element {
  transition-property: opacity, transform;
  transition-duration: 0.5s, 1s;
}

transition-timing-function：控制速度曲线

这个属性定义了过渡效果的速度曲线，常用的值包括：

• ease：默认值，慢速开始，然后变快，然后慢速结束
• linear：匀速
• ease-in：慢速开始
• ease-out：慢速结束
• ease-in-out：慢速开始和结束
• cubic-bezier(n,n,n,n)：自定义贝塞尔曲线

.menu-item {
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu-item.active {
  transform: translateX(0);
}

transition-delay：设置延迟时间

transition-delay定义了过渡效果开始前的等待时间。

.notification {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-delay: 1s;
}

.notification.show {
  opacity: 1;
}

多个属性的延迟时间可以分别设置：

.card {
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-delay: 0s, 0.1s;
}

简写语法

transition属性可以使用简写形式，语法如下：

selector {
  transition: [property] [duration] [timing-function] [delay];
}

示例：

.btn {
  transition: background-color 0.3s ease-in-out, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

多阶段过渡

通过合理设置transition属性，可以实现复杂的多阶段动画效果：

.loader {
  width: 50px;
  height: 50px;
  background: #3498db;
  transition: 
    width 0.5s ease-in-out 0s,
    height 0.5s ease-in-out 0.5s,
    background 0.5s ease-in-out 1s;
}

.loader.active {
  width: 100px;
  height: 100px;
  background: #e74c3c;
}

实际应用示例

下拉菜单效果

.dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.dropdown:hover .dropdown-menu {
  max-height: 500px;
}

卡片悬停效果

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

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

表单输入反馈

.input-field {
  border-bottom: 2px solid #ddd;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: #3498db;
}

性能优化考虑

并非所有CSS属性都适合使用transition，某些属性会触发重排(reflow)和重绘(repaint)，影响性能。推荐优先使用以下属性：

• transform
• opacity
• filter
• background-color (简单变化)

避免在以下属性上使用过渡：

• width/height
• margin/padding
• top/left/right/bottom
• font-size

浏览器兼容性处理

虽然现代浏览器都支持transition，但有时需要添加前缀：

.element {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

与animation的区别

transition适合简单的状态变化，而animation更适合复杂的多关键帧动画：

• transition需要触发条件（如:hover）
• animation可以自动播放
• animation可以定义多个关键帧
• transition通常代码更简洁

调试技巧

在浏览器开发者工具中，可以：

1. 检查transition属性的计算值
2. 修改参数实时预览效果
3. 使用动画时间轴分析性能
4. 强制触发过渡状态进行测试

/* 调试时添加这个规则可以快速查看所有过渡元素 */
* {
  transition: all 0.3s ease !important;
}

高级技巧：链式过渡

通过合理设置delay，可以创建链式过渡效果：

.list-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 为每个列表项设置不同的延迟 */
.list-item:nth-child(1) { transition-delay: 0.1s; }
.list-item:nth-child(2) { transition-delay: 0.2s; }
.list-item:nth-child(3) { transition-delay: 0.3s; }

.list-loaded .list-item {
  opacity: 1;
  transform: translateY(0);
}