@keyframes rotateIn 同时定义 rotate(-20deg) 和 opacity:0→1，配合 animation: rotateIn 0.6s ease-out forwards、transform: translateZ(0) 及避免 overflow: hidden，确保流畅硬件加速入场动画。
用 @keyframes 同时控制 rotate() 和 opacity
直接定义一个关键帧动画，从初始状态（旋转 -20deg + 透明度 0）过渡到最终状态（旋转 0deg + 透明度 1）。注意：必须同时设置两个属性，否则浏览器可能只触发其中一个的动画（尤其在旧版 Safari 中）。
@keyframes rotateIn {
from {
transform: rotate(-20deg);
opacity: 0;
}
to {
transform: rotate(0);
opacity: 1;
}
}常见错误是只写 transform 或只写 opacity，导致动画“卡顿”或“闪一下就出现”，本质是浏览器没把它们识别为同一动画流程。
给卡片元素添加 animation 并确保可触发
应用动画时，要确认元素默认状态与 from 关键帧一致，否则会跳变。推荐显式声明初始值，并用 animation-fill-mode: forwards 锁定结束态。
-
animation属性必须包含名称、时长、缓动、填充模式，例如：animation: rotateIn 0.6s ease-out forwards - 避免在父容器上设
overflow: hidden，否则旋转过程可能被意外裁剪（尤其负角度起始时） - 如果卡片是 JS 动态插入的，需确保 class 添加后 DOM 已就绪，否则动画可能不触发（可加
setTimeout(() => el.classList.add('animated'), 1)强制重排）
兼容性与性能要点：别漏掉 transform: translateZ(0)
在部分 Android WebView 和老版 iOS Safari 中，纯 rotate() + opacity 可能触发软件渲染，造成卡顿。加一层硬件加速能稳定帧率。
立即学习“前端免费学习笔记（深入）”；
.card {
animation: rotateIn 0.6s ease-out forwards;
transform: translateZ(0); /* 触发 GPU 渲染 */
}另外，ease-out 比 linear 更自然，但若想更柔和，可用 cubic-bezier(0.34, 1.56, 0.64, 1)（类似 iOS 弹性入场）。
加载时自动播放？小心 SSR 和 hydration 不同步
服务端渲染（如 Next.js / Nuxt）下，CSS 动画会在 HTML 直出时就执行，导致首屏闪动。解决方法：
- 用
animation-delay: 0.1s错开首帧，或 - JS 控制：初始加
class="card--pending"，在useEffect/mounted后切换为card--animate，再由 CSS 驱动动画 - 不推荐用
visibility: hidden+ JS 显示，因为会破坏 SSR 的可访问性和 SEO
真正容易被忽略的是：动画时间太短（1s）又拖慢感知性能；0.4–0.7s 是较稳妥的区间。
