CSS动画基础：用transition和keyframes创造流畅交互

好的动画是无形的——它不会引起用户的注意，却能让交互变得更加自然。但糟糕的动画却会分散注意力，甚至让用户感到烦躁。掌握CSS动画，是每位前端设计师的必修课。

transition 属性

transition 是最容易上手的动画方式，适合处理简单的状态变化：

.button {
  background-color: #333;
  transition: background-color 0.3s ease,
              transform 0.2s ease;
}

.button:hover { background-color: #555; transform: translateY(-2px); } ```

transition 的四个参数

• . **property**：要过渡的属性（可选 all）
• . **duration**：过渡时长（必填，单位ms或s）
• . **timing-function**：缓动函数
• . **delay**：延迟时间

常用缓动函数： - `ease`：默认值，慢-快-慢 - `linear`：匀速 - `ease-in`：慢-快 - `ease-out`：快-慢 - `ease-in-out`：慢-快-慢

@keyframes 规则

复杂的动画需要使用关键帧：

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element { animation: fadeInUp 0.6s ease-out; } ```

动画属性详解

.element {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.1s;
  animation-iteration-count: 1; /* 或 infinite*/
  animation-direction: normal; /* 或 reverse, alternate */
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}

性能优化：transform 和 opacity

动画会触发浏览器重排（reflow）和重绘（repaint），影响性能。优化技巧：

使用 transform 和 opacity

/* ❌ 低效 */
@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

/* ✅ 高效 */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } ```

启用GPU加速

.element {
  transform: translateZ(0);
  /* 或 */
  will-change: transform;
}

实用的交互动画

按钮点击反馈 ```css .button:active { transform: scale(0.96); transition: transform 0.1s; } ```

卡片悬停效果 ```css .card { transition: transform 0.3s ease, box-shadow 0.3s ease; }

.card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); } ```

结语

动画不是装饰，而是功能的一部分。好的动画能够： - 提供即时反馈 - 建立视觉连续性 - 引导用户注意力 - 传达品牌个性

开始时少做动画，逐渐找到感觉。记住：动画的目的是服务用户，而不是炫技。