JavaScript动画核心是控制样式属性随时间变化，主要通过requestAnimationFrame或setTimeout驱动；现代开发推荐JS控制+CSS实现的组合方式，兼顾性能与可维护性。
JavaScript 动画的核心是**控制元素的样式属性随时间变化**，主要靠定时更新（如 requestAnimationFrame 或 setTimeout）来驱动视觉过渡。不依赖 CSS 的话，JS 本身就能完成位移、缩放、旋转、透明度等效果，但现代开发中更推荐“JS 控制 + CSS 实现”的组合方式，兼顾性能与可维护性。
基于 requestAnimationFrame 的手动动画
这是最底层、最灵活的方式，适合需要精细控制或复杂物理逻辑（比如抛物线运动、拖拽跟随）的场景。
- 用
requestAnimationFrame替代setInterval，让动画节奏与屏幕刷新率同步，更流畅、更省资源 - 在每一帧里计算当前状态（如位置 = 起始值 + 进度 × 总变化量），再通过
element.style.xxx更新样式 - 配合时间戳（
performance.now()）可实现匀速、缓动（ease-in/out）等效果，而不仅是帧数驱动
CSS transition + JS 触发
这是最常用、最轻量的交互动画方案：JS 不负责逐帧计算，只负责“加 class”或“改属性”，把过渡交给 CSS 渲染引擎处理。
- 给元素定义
transition: transform 0.3s ease, opacity 0.2s linear - JS 中修改
element.style.transform = 'translateX(100px)'或切换 class 即可触发动画 - 优势明显：硬件加速（尤其是
transform和opacity）、代码简洁、浏览器优化好
CSS @keyframes + JS 控制动画状态
适合较复杂的多阶段动画（比如加载图标、入场+高亮+退出三段流程），JS 主要用来启动、暂停、重播或动态设置变量。
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
立即学习“Java免费学习笔记（深入）”；
- 用
@keyframes定义动画序列，CSS 中绑定animation属性 - JS 可通过
element.animate()（Web Animations API）创建/控制动画，支持动态参数和回调（如onfinish） - 也可用
element.style.animationName = 'slideIn'切换动画，配合animationend事件做后续逻辑
第三方动画库（如 GSAP、anime.js）
当项目有大量复杂交互动画（时间轴嵌套、滚动触发、SVG 动画、物理模拟）时，专业库能显著提升效率和可靠性。
- GSAP：性能强、兼容好、控制精细（暂停/倒放/变速/贝塞尔曲线），支持 React/Vue 插件
- anime.js：轻量（仅 15KB）、API 简洁、原生支持 SVG 和 CSS 变量动画
- 它们内部仍基于
requestAnimationFrame，但封装了缓动函数、时间轴、冲突管理等细节，减少手写 bug
基本上就这些。选哪种技术，关键看需求复杂度：简单状态切换用 CSS transition；需精确时序或链式动画用 Web Animations API；重度交互动画直接上 GSAP。别为了“纯 JS”而放弃 CSS 的天然优势，协同使用才是常态。
