JavaScript动画效果的核心在于控制元素样式变化节奏，CSS负责视觉渲染，二者通过JS切换类名触发CSS动画实现高性能交互；JS处理时机与逻辑，CSS承担过渡、变换与关键帧；避免强制重排，优先使用transform和opacity，可选Web Animations API增强控制。
JavaScript动画效果的核心在于控制元素的样式变化节奏，而CSS负责定义视觉表现。两者结合的关键是让JS驱动动画逻辑（如时间控制、交互响应），CSS承担实际的渲染（如过渡、变换、关键帧）。这样既保证性能，又保持代码清晰。
CSS动画作为基础视觉层
CSS动画适合处理可预测的、重复性强的视觉变化，比如淡入淡出、缩放、位移。用@keyframes定义动画序列，再通过animation或transition应用到元素上。JS不直接改写大量样式，而是切换类名来触发CSS动画。
- 给按钮加点击反馈：JS添加
is-pressed类，CSS中定义该类的transform: scale(0.95)和transition: transform 0.1s ease - 页面加载动效：初始设
opacity: 0; transform: translateY(20px)，JS在DOM就绪后加is-loaded类，CSS用transition平滑过渡
JS控制动画时机与交互逻辑
JS擅长响应用户行为（点击、滚动、鼠标移动）并决定“何时开始”“是否暂停”“如何中断”。它不替代CSS做逐帧绘制，而是调度CSS动画的启停与参数调整。
- 滚动触发动画：监听
scroll事件，当元素进入视口时添加animate-in类；离开时可选择保留动画状态或重置 - 动画链式执行：用
element.addEventListener('animationend', handler)监听CSS动画结束，再触发下一个类名变更 - 动态调整持续时间：JS修改元素的
style.setProperty('--anim-duration', '0.8s')，CSS变量配合animation-duration: var(--anim-duration)
避免强制同步布局，保障流畅性
频繁读取offsetTop、getBoundingClientRect()等会触发浏览器重排，拖慢动画。应把读取操作集中，写入操作批量进行，并优先使用transform和opacity这类可GPU加速的属性。
PHP5 和 MySQL 圣经
下载
本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。
立即学习“Java免费学习笔记（深入）”；
- 用
requestAnimationFrame代替setTimeout驱动JS逻辑，确保与屏幕刷新率同步 - 需要获取位置信息时，先缓存一次结果，后续逻辑复用，而非每帧都查
- 对需复杂计算的动画（如跟随鼠标路径），仍可用
canvas或Web Animations API补充，但日常交互动效CSS+JS类名切换已足够
现代方案：Web Animations API（可选进阶）
如果需要更精细的JS控制（如暂停、反向、调节播放速率），又不想手写requestAnimationFrame循环，可以考虑element.animate()。它让JS直接创建动画实例，同时兼容CSS的缓动函数和关键帧语法。
elem.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: 'ease-out' })- 返回的
Animation对象支持play()、pause()、reverse()、onfinish等方法 - 注意兼容性：Chrome/Firefox/Edge支持良好，Safari需检查版本；可搭配
web-animations-jspolyfill
