变换、过渡与动画

transform 改变元素视觉几何但不改变文档流占位（周围元素布局不变）；transition 在两种状态间插值；animation 用 @keyframes 定义多关键帧序列。与 视觉效果 中的滤镜、裁剪可组合使用。

变换（transform）

在局部坐标系中应用；默认变换原点为 transform-origin: center（可改为 top left 等）。

2D

独立变换属性（与 transform 函数可组合，便于单独过渡某一维）：

.card:hover {
    transform: translateY(-4px) scale(1.02);
}
.panel {
    translate: 0 0;
    transition: translate 0.3s ease;
}
.panel.is-open {
    translate: 0 -8px;
}

3D

• 父级设置 perspective（如 perspective: 800px）才有「近大远小」。
• 子级 transform-style: preserve-3d 保留子元素 3D 空间（否则会被压平）。
• 使用 translate3d / rotateX 等可触发 GPU 合成。

.scene {
    perspective: 500px;
}
.cube {
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
}

定位元素 transform 非 none 时，会成为 fixed 子元素的包含块参照之一（与 定位 相关）。

过渡（transition）

在属性计算值变化时插值（需触发：:hover、类名切换等）。

.button {
    background-color: blue;
    transition:
        background-color 0.5s ease,
        transform 0.3s ease;
}
.button:hover {
    background-color: red;
    transform: scale(1.05);
}

• 仅能在起止两态间过渡；auto、fit-content 等往往无法平滑插值。
• 事件：transitionend（注意 propertyName）。

动画（animation + @keyframes）

可自动播放、循环、反向，定义任意中间关键帧。

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
}

.ball {
    animation: bounce 2s ease-in-out infinite;
}

事件：animationstart、animationiteration、animationend。

@starting-style

为元素首次插入文档或 display 从 none 变为可见时定义「起始样式」，与 transition 配合实现入场动画（无需仅靠 JS 设初始类名）。

.dialog {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
@starting-style {
    .dialog {
        opacity: 0;
        transform: scale(0.95);
    }
}

滚动驱动动画（概要）

通过 animation-timeline: scroll() 等将动画进度绑定到滚动位置，适用于进度条、视差等；语法与浏览器支持见 MDN：滚动驱动动画（英文）与 现代 CSS 概览。

对比总表

最佳实践

1. 优先动画化 transform 与 opacity，避免 width、height、top、left、margin 等触发布局（layout）的属性。
2. 简单交互用 transition；加载、循环、复杂路径用 animation。
3. 3D 记得父级 perspective。
4. 无障碍：提供 @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } 或等价降级（勿破坏必要反馈）。
5. 必要时 will-change: transform 提示合成（勿滥用，动画结束可移除）。

参考文献

以下链接在编写时均可正常访问：