CSS过渡基础

CSS过渡让元素从一种样式平滑过渡到另一种样式，无需JavaScript即可实现动画效果。

过渡概念

过渡是CSS3提供的动画机制，当元素CSS属性值变化时，在指定时间内平滑过渡而非瞬间切换。

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 0.3s;
}

.box:hover {
  width: 200px;
}

触发方式

过渡由状态变化触发，常见触发方式：

基本语法

transition: 属性名 持续时间 延迟时间 缓动函数;

简写示例

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

/* 多个属性 */
transition: width 0.3s, height 0.5s;

/* 所有属性 */
transition: all 0.3s ease;

分写属性

transition-property: width;        /* 过渡属性 */
transition-duration: 0.3s;         /* 持续时间 */
transition-delay: 0.1s;             /* 延迟时间 */
transition-timing-function: ease;  /* 缓动函数 */

可过渡属性

只有具有中间值的CSS属性才能过渡：

/* 可过渡 */
width, height, margin, padding, opacity, color, background-color, transform

/* 不可过渡 */
display, visibility: hidden, position

过渡要求属性值必须有数值或颜色中间态，display: none 到 display: block 无法过渡。

简单示例

.btn {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background 0.3s, transform 0.3s;
}

.btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

注意事项

• 必须有起始状态和结束状态
• 持续时间必填，默认为0则无过渡效果
• 过渡效果在状态恢复时同样生效
• 性能优先选择 transform 和 opacity

要点总结

• 过渡实现状态变化的平滑动画
• 通过伪类或类名切换触发
• transition: 属性 时长 延迟 缓动 为完整简写
• 只有具中间值的属性可过渡
• 优先过渡 transform 和 opacity 以优化性能