动画与变换

这一课你将能做到

1. 用 transition 做平滑的属性过渡
2. 用 transform 做位移、旋转、缩放、倾斜
3. 用 @keyframes + animation 做复杂关键帧动画
4. 用 will-change 和 transform 优化动画性能

为什么要学

没有动画的页面像静态照片，加了动画就有了生命。但动画做得不好反而伤害体验——卡顿、闪烁、过度炫技。学这一课，你要让动画「丝滑且克制」。

人话：transition 像「渐变开关」——从 A 状态平滑到 B 状态；@keyframes 像「分镜脚本」——你写好每一帧，浏览器照着演；transform 是「直接操作图层」，性能最好的动画方式。

先建立图像

<style>
    .btn {
        padding: 12px 24px;
        background: #0366d6;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btn:hover {
        background: #024fa3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(3, 102, 214, 0.4);
    }
</style>

<button class="btn">悬停我</button>

鼠标悬停，按钮 0.3 秒内平滑变深色、上移 2px、出现阴影。

跟着做

步骤 1：transition 过渡

.box {
    transition: 属性 时长 缓动 延迟;
    transition: all 0.3s ease;
    transition: background 0.3s, transform 0.5s 0.1s;
}

四要素：

• 属性：要过渡的 CSS 属性（all 表示全部）
• 时长：0.3s 或 300ms
• 缓动：ease（默认）/linear/ease-in/ease-out/ease-in-out/cubic-bezier(...)
• 延迟：可选，多久后开始

步骤 2：哪些属性能过渡

能过渡：color、background、width、height、padding、margin、opacity、transform、box-shadow 等数值/颜色类属性。

不能过渡：display（none 到 block 突变）、font-family、position。

步骤 3：transform 变换

.box { transform: translate(20px, 30px); }  /* 平移 x, y */
.box { transform: translateX(20px); }
.box { transform: scale(1.2); }              /* 缩放 */
.box { transform: scale(2, 0.5); }           /* x 放大 2 倍，y 缩一半 */
.box { transform: rotate(45deg); }           /* 旋转 */
.box { transform: skew(10deg, 20deg); }      /* 倾斜 */
.box { transform: translate(20px, 30px) rotate(45deg) scale(1.2); } /* 链式 */