Composer 是 PHP 依赖管理工具，与前端动画无关；CSS 动画平滑关键在触发时机、仅 animating transform/opacity 属性以启用 GPU 加速，避免 left 等触发布局的属性。
Composer 不是前端动画相关工具，也没有「关键帧」概念——你大概率是把 CSS @keyframes 或 JavaScript 动画库（比如 GSAP、anime.js）误记成了 Composer。Composer 是 PHP 的依赖管理工具，和网页动画完全无关。
如果你实际想问的是 CSS 关键帧如何实现平滑过渡，那核心不在“怎么写 @keyframes”，而在于「何时触发、是否合成、有无布局抖动」：
@keyframes 本身不保证平滑，平滑取决于你动的属性和上下文
- 只有
transform和opacity这两类属性能进合成器线程，真正 GPU 加速、不卡顿 - 写
@keyframes { from { left: 0; } to { left: 100px; } }看似简单，但left强制触发布局（Layout），每帧都重排，60fps 直接崩成 20fps - 同样逻辑换成
transform: translateX(0)→translateX(100px)，帧率基本不受 DOM 复杂度影响
transition 和 @keyframes 混用时，animation 会覆盖 transition
- 如果元素同时有
transition: transform 0.3s和正在运行的animation: slideIn 0.4s，transition 对该属性完全失效 - 想手动控制起止，又想靠 CSS 做过渡，更稳妥的做法是：用 JS 切换 class 触发
@keyframes，或用transition+getComputedStyle强制重排后再改值
缓动函数别只靠 ease，要匹配动效意图
-
ease（即cubic-bezier(0.25, 0.1, 0.25, 1)）适合一般状态切换，但入场动画建议用ease-out，退出用ease-in - 阻尼弹跳、慢入快出等效果，必须手写
cubic-bezier()或用工具生成，比如cubic-bezier(0.34, 1.56, 0.64, 1)就是常见过冲回弹曲线
真正难的不是写出关键帧代码，而是判断这个动画该不该用 CSS 实现——比如需要响应滚动位置、中途被拖拽打断、或目标值在运行时动态计算，这时候 @keyframes 就得让位给 requestAnimationFrame + transform 手动插值。
