css 想让卡片在页面加载时旋转淡入动画怎么办_结合 transform rotate 和 opacity keyframes

@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="tuc-19bc10f7-b20151-0 card--pending tuc-19bc10f7-b20151-0"，在 useEffect / mounted 后切换为 card--animate，再由 CSS 驱动动画
• 不推荐用 visibility: hidden + JS 显示，因为会破坏 SSR 的可访问性和 seo

真正容易被忽略的是：动画时间太短（1s）又拖慢感知性能；0.4–0.7s 是较稳妥的区间。