瞬变太廉价

你给按钮加了 :hover，鼠标移上去颜色"啪"地一下跳变——感觉卡顿、廉价，像 1990 年代的网页。怎么让它丝滑？

.btn { background: #007bff; }
.btn:hover { background: #0056b3; }
/* 颜色瞬间跳变，像闪了一下 */

.btn {
  background: #007bff;
  transition: background-color 0.3s ease;
}
/* 300ms 内平滑渐变，活了 */

这一章就解决这类问题。掌握 transform、transition、animation 三件套，你的界面会从"能用"变成"想用"。

元素形变

Transform 的 2D/3D 形变四个基本操作：位移、缩放、旋转、倾斜

/* 位移 — 最常用，不影响文档流 */
transform: translate(50px, -20px);
transform: translateX(100%);

/* 缩放 */
transform: scale(1.5);        /* 放大 1.5 倍 */
transform: scale(0.8, 1.2);   /* 宽缩高放 */

/* 旋转 */
transform: rotate(45deg);

/* 倾斜 */
transform: skew(10deg, 5deg);

形变实战

Transform 最常用的三种微交互：居中、上浮、旋转——威力在于 hover 与状态切换

position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);

.btn:hover { transform: translateY(-2px); }
.card:hover { transform: scale(1.02); }
.icon:hover { transform: rotate(180deg); }

变换的锚点

transform-origin 控制变换的"支点"——同一个 rotate，锚点不同，效果天差地别

/* 默认绕中心旋转 */
.icon { transform: rotate(45deg); }
/* 等价于显式写出 */
.icon { transform-origin: 50% 50%; transform: rotate(45deg); }

/* 绕左上角旋转 → 像翻页 */
.page { transform-origin: left center; transform: rotateY(-30deg); }

/* 绕底部中心放大 → 像从地面升起 */
.menu { transform-origin: bottom center; transform: scaleY(1.3); }

过渡入门

Transition 让变化有温度——状态跳变是冰冷的，过渡让操作有了"回响"

.btn { background: #007bff; }
.btn:hover { background: #0056b3; }
/* 颜色瞬间跳变 → 用户感觉"卡"了一下 */

.btn {
  background: #007bff;
  transition: background-color 0.3s ease;
}
/* 颜色在 300ms 内匀速渐变 → 高级感 */

四个子属性

transition 控制着"怎么变、变多快、何时开始"

/* 简写顺序：property duration timing-function delay */
transition: all 0.3s ease 0s;

缓动曲线

timing-function 决定运动的"情绪"——同样的时间，加速 vs 减速，情感完全不同

/* 预定义关键词 */
transition: transform 0.3s ease;          /* 默认：先快后慢 */
transition: transform 0.3s linear;        /* 匀速：机械感 */
transition: transform 0.3s ease-in;       /* 慢入：退出、消失 */
transition: transform 0.3s ease-out;      /* 慢出：进入、出现 */
transition: transform 0.3s ease-in-out;   /* 慢入慢出：卡片 */

/* 自定义贝塞尔曲线 */
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 回弹 */

可动画属性

哪些属性能做过渡，哪些不能——牢记这张表，做动画不走弯路

按钮与卡片

实战：打造一套丝滑的 hover 效果合集，直接用在你的个人主页上

/* 主按钮：上浮 + 阴影 */
.btn-primary {
  background: #D06519; color: #fff; border: none;
  padding: 12px 28px; border-radius: 8px;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(208, 101, 25, 0.4);
}

/* 卡片：浮起 */
.card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* 链接：下划线滑出 */
.link { position: relative; }
.link::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 2px;
  background: #D06519; transition: width 0.3s ease;
}
.link:hover::after { width: 100%; }

过渡的局限

Transition 只能两端过渡——CSS Animation 是多阶段剧本，@keyframes 是导演的指令

/* 只能做 A → B 状态跳变 */
transition: transform 0.3s ease;
/* 无法实现：A → B → C 复杂路径 */
/* 无法自动播放（依赖伪类触发） */
/* 无法暂停、反转、循环 */

/* 定义多阶段动画 */
@keyframes slideIn {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { transform: translateX(20px); }
  100% { transform: translateX(0); opacity: 1; }
}
.element { animation: slideIn 0.6s ease-out; }

六个子属性

掌握 animation 这 6 个子属性，就能定义复杂动画的"导演指令集"

.bounce-ball {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;  /* 数字或 infinite */
  animation-direction: alternate;        /* normal/alternate/reverse */
  animation-fill-mode: forwards;         /* 动画结束后停留在哪 */
}

/* 简写顺序 */
animation: bounce 1s ease-in-out 0s infinite alternate forwards;

旋转加载器

实战：纯 CSS 实现 loading——一个 div + 一圈边框 + keyframes = 完整动画

<div class="loader"></div>

.loader {
  width: 40px; height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #D06519;        /* 顶部高亮 */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

渐显入场动画

实战：用 animation-delay 创造错落有致的列表入场效果

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

.card {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;  /* 初始不可见，动效完成后 forwards 保留 */
}

/* 5 张卡片错落出现 */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }
/* ... 依次加 0.1s → 瀑布般的入场效果 */

GPU 加速

will-change 是 GPU 加速的最后钥匙——告诉浏览器"这个元素即将动画"，浏览器提前分配资源

/* 告诉浏览器：这个元素即将做 transform 变化 */
.card {
  will-change: transform;      /* 提前分配 GPU */
  transition: transform 0.3s ease;
}

/* ❌ 滥用 will-change → 内存暴涨，性能更差 */
* { will-change: transform; }   /* 千万别这样做！ */

/* ✅ 只在即将动画的元素上使用 */
.box:hover { will-change: transform; }
.box:not(:hover) { will-change: auto; }

体谅不动画

prefers-reduced-motion——为不想看动画的用户（前庭功能障碍、癫痫）提供无动画体验

/* 为所有人添加动画 */
.card {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* 尊重'减少动画'系统设置 */
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;          /* 关闭动画 */
    opacity: 1;               /* 确保内容立即可见 */
    transform: none;
  }
}