3.8 css过渡和动画，多列布局

CSS Transition 核心概念

通过 transition 属性，为元素的CSS属性变化添加平滑动画效果，避免突兀的跳跃式变化。

​基本语法

.element {
  transition: property duration timing-function delay;
}

• ​**property**：需要过渡的属性（如 all, color, transform）
• ​**duration**：动画持续时间（如 0.3s, 1ms）
• ​**timing-function**：动画时间曲线（如 ease, linear, cubic-bezier()）
• ​**delay**：动画延迟时间（如 0.2s）

---

​核心属性详解

1. ​**transition-property**

• ​作用：指定需要过渡的属性
• ​取值：
  • all：所有可过渡属性自动应用过渡
  • color, transform, opacity 等具体属性
  • 多个属性用逗号分隔：transition-property: transform, opacity;

2. ​**transition-duration**

• ​作用：控制动画持续时间
• ​取值：
  • 数值 + 单位：0.5s（默认值 0s，即无过渡）
  • fast（0.2s） / slow（0.6s）

3. ​**transition-timing-function**

• ​作用：定义动画速度曲线
• ​常用值：

  函数	效果	图示
  ease	默认缓动（先慢后快）	↗️↘️
  linear	匀速运动	→
  ease-in	缓慢开始	↗️
  ease-out	缓慢结束	↘️
  ease-in-out	先缓后急再缓	↗️↘️↗️
  cubic-bezier(n1, n2, n3, n4)	自定义贝塞尔曲线

  <