@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 可能触发软件渲染，造成卡顿。加一层硬件加速能稳定帧率。
立即学习“前端免费学习笔记（深入）”；
