推荐使用 scale(0.8) 作为缩放动画起始值，避免 scale(0) 导致不可见或交互失效；关键帧中禁用 transform: none；需结合 JS 控制触发时机，并设置 animation-fill-mode: forwards 防回退。
用 @keyframes 定义从 0.8 到 1 的缩放动画
直接设 scale(0) 容易导致元素不可见、点击失效或布局塌陷，所以起始值建议用 scale(0.8) 或 scale(0.9)。关键帧里不要写 transform: none，它会被解析为 scale(1) translate(0) rotate(0)，和预期不一致。
@keyframes zoomIn {
from {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}
给元素加 animation 并控制触发时机
动画默认在元素插入 DOM 后立即播放，但若元素初始是 display: none 或在懒加载区域（如 IntersectionObserver 触发后才显示），需等可见后再启动。此时别依赖 CSS 自动播放，改用 JS 添加类来触发：
-
animation属性必须包含名称、持续时间、缓动函数，例如animation: zoomIn 0.3s ease-out; - 加
animation-fill-mode: forwards;防止动画结束瞬间回退到初始状态 - 如果元素初始 opacity 为 0，可同步加
opacity动画，避免“闪一下再缩放”
避免常见错：transform-origin 影响缩放中心点
默认缩放中心是元素中心（transform-origin: 50% 50%）。如果元素视觉上像“从左上角弹出”，就得改 origin：
- 从左上角缩放：
transform-origin: top left; - 从底部居中升起：
transform-origin: bottom center; - 不设置时，若父容器有
overflow: hidden，缩放过程可能被意外裁剪
兼容性与性能注意点
transform 和 @keyframes 在现代浏览器中无兼容问题，但要注意：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 旧版本（animation-timing-function 中的
cubic-bezier()支持不稳定，慎用复杂贝塞尔曲线 - 别在
:hover或频繁重排的容器里反复 toggle 动画类，容易触发 layout thrashing - 如果动画卡顿，检查是否同时应用了
width/height变化——这类属性会触发重排，而transform是合成层操作，更高效
