CSS：transition语法

语法解析

该声明由三个核心部分组成：

transition: [属性名] [持续时间] [时间函数];

• transform：指定要过渡的 CSS 属性（这里是 transform，即元素的变形属性，如平移、缩放、旋转等）。
• 0.5s：过渡动画的持续时间（500毫秒）。
• ease-in-out：时间函数（动画的速度变化曲线），表示动画先慢后快再慢。

核心作用

当元素的 transform 属性值发生变化时（如从 transform: translateX(0) 变为 transform: translateX(100px)），浏览器会自动在 0.5s 内平滑过渡这一变化，而不是瞬间跳转，从而产生流畅的动画效果。

关键细节

1. 过渡的触发条件

transition 仅在属性值发生变化时触发，常见触发方式：

• 伪类（hover、active、focus 等）
• JavaScript 动态修改属性（如轮播图中通过 JS 改变 transform 值）
• 媒体查询（响应式布局中尺寸变化）

2. transform 属性的特殊性

transform 是性能优化的关键属性，原因：

• 它的变化仅影响元素的视觉呈现，不会触发页面的重排（reflow），只会触发重绘（repaint） 或由 GPU 处理的复合层（composite）。
• 配合 transition 时，动画更流畅，尤其适合高频交互（如轮播图滑动、侧边栏切换）。

3. 时间函数（ease-in-out）

时间函数定义动画速度的变化规律，常见值：

• ease：默认值（慢→快→慢）
• ease-in：开始慢，逐渐加快
• ease-out：开始快，逐渐减慢
• ease-in-out：开始和结束都慢，中间快（适合大多数交互动画）
• linear：匀速（适合机械感动画）

实际应用示例

1. 轮播图滑动效果（核心原理）

.slider-wrapper {
  display: flex; /* 子元素横向排列 */
  transition: transform 0.5s ease-in-out; /* 关键过渡声明 */
}

/* 当需要切换到第2张图时，JS动态修改transform */
.slider-wrapper.active {
  transform: translateX(-100%); /* 横向平移-100%（显示下一张） */
}

通过 JavaScript 动态修改 transform: translateX(n%) 的值，配合 transition 即可实现轮播图的平滑滑动。

2. 悬浮缩放效果

.box {
  transition: transform 0.5s ease-in-out; /* 监听transform变化 */
}

.box:hover {
  transform: scale(1.1); /* 悬浮时放大1.1倍，触发过渡动画 */
}

3. 旋转动画

.icon {
  transition: transform 0.5s ease-in-out;
}

.icon.active {
  transform: rotate(180deg); /* 点击时旋转180度，触发过渡 */
}

注意事项

1. 初始状态与目标状态
   过渡需要明确的“初始值”和“目标值”，如果初始值未定义，可能导致动画不生效。例如：

   /* 错误：初始未定义transform，可能无动画 */
   .box { transition: transform 0.5s; }
   .box:hover { transform: translateX(10px); }
   
   /* 正确：定义初始值 */
   .box { 
     transition: transform 0.5s;
     transform: translateX(0); /* 明确初始状态 */
   }
   

2. 多个属性过渡
   如需同时过渡多个属性，可用逗号分隔，或用 all 表示所有属性：

   /* 同时过渡transform和opacity */
   transition: transform 0.5s ease-in-out, opacity 0.5s ease;
   
   /* 过渡所有可动画属性（不推荐，可能影响性能） */
   transition: all 0.5s ease-in-out;