HTML5动画如今几乎是网页标配，从首页的轮播banner到电商平台的促销特效，再到数据可视化大屏上的动态图表，动画效果无处不在。但做出来和做得好完全是两回事，很多开发者写完动画代码就急着上线，没有认真审视过这个动画到底合不合格。一个合格的HTML5动画，至少要满足五个方面的基本要求，缺了任何一条，都可能在真实用户面前暴露出问题。
第一点：性能要流畅，不能让页面掉帧
性能是动画合格与否的第一道门槛。判断标准很简单：动画运行时帧率要稳定在60fps左右，也就是每一帧大约16毫秒内必须完成渲染。一旦掉到30fps以下，人眼就能明显感觉到卡顿，用户的直接感受就是这个网站很卡、很廉价。
在实际开发中，性能问题往往出在触发了浏览器重排上。很多初学者喜欢用JavaScript频繁修改元素的left、top、width、height属性来实现位移和缩放，这些属性一旦变化，浏览器就要重新计算布局，代价非常高。正确的做法是尽量使用transform和opacity这两个属性来做动画，因为它们只触发合成阶段，由GPU直接处理，性能开销极小。
另外要注意控制DOM元素数量和动画层级。一个页面上同时跑几十个动画元素，再优秀的浏览器也会吃不消。如果确实需要大量粒子效果，可以考虑改用Canvas或WebGL来渲染，把动画从DOM体系里剥离出来。同时善用will-change属性提示浏览器提前做好优化准备，但也要适度使用，滥用反而会增加内存占用。
第二点：兼容性要过关，主流浏览器都得跑得起来
用户用什么浏览器访问你的页面，你没法控制。Chrome、Safari、Firefox、Edge，再加上国内各种双核浏览器，甚至还有不少老旧的IE用户。一个合格的动画必须在这些环境下都能正常呈现，而不是只在开发者的Chrome里完美运行。
具体来说，CSS3动画需要注意浏览器前缀问题。虽然现代浏览器大多已经支持标准写法，但一些较老版本仍然需要-webkit-、-moz-这类前缀。使用JavaScript动画时，要留意requestAnimationFrame在老浏览器中需要降级处理，可以写一个兼容函数回退到setTimeout。使用Web Animation API或Canvas相关特性时，也建议先做特性检测，检测不通过就提供降级方案。
测试环节不能偷懒。至少要在真实设备上跑一遍，尤其是iOS的Safari和安卓的微信内置浏览器，这两者的渲染行为和桌面端有不少差异，很多在电脑上正常的动画，到了手机上就会出现闪烁、错位甚至直接黑屏的情况。
第三点：响应式适配，任何屏幕尺寸都不能乱
现在的屏幕尺寸五花八门，从巴掌大的手机到超宽的桌面显示器，动画如果在某些尺寸下错位、溢出或者消失，那就是不合格。响应式适配的核心是让动画的尺寸和位置随容器弹性变化，而不是写死像素值。
实现上有几个常用手段。优先使用百分比、vw、vh等相对单位来定义动画元素的尺寸和位置；在Canvas动画中，监听resize事件重新计算画布尺寸，并考虑设备像素比，用devicePixelRatio做高清适配，避免动画在高分屏上发虚；对于复杂的动画布局，可以结合媒体查询在不同断点下调整动画的幅度和节奏，小屏幕上适当简化效果，既保证了观感也减轻了性能负担。
移动端还有一个容易被忽略的细节：横竖屏切换。用户旋转手机后，动画如果不能正确重排，体验会非常糟糕。建议在关键动画场景中监听orientationchange事件，及时重新计算布局参数。
第四点：可控性与可维护性，动画不能是一锤子买卖
合格的动画必须是可控的。所谓可控，是指动画可以被暂停、恢复、重放、跳转，甚至在某些条件下被禁用。比如用户切换到其他标签页时，动画应该自动暂停以节省资源，这一点requestAnimationFrame天然支持，但如果用的是setInterval驱动的动画就需要自己处理。再比如用户点击了减少动态效果的偏好设置，页面应当尊重prefers-reduced-motion这个媒体查询，关闭或简化动画，这既是可访问性的要求，也是对用户的尊重。
可维护性则体现在代码结构上。动画的时长、延迟、缓动函数这些参数，不要散落在各个角落，应该集中定义成变量或配置对象，方便后期统一调整。如果是团队协作项目，动画逻辑尽量封装成可复用的模块或组件，写清楚注释，让接手的人能看懂每个动画的触发条件和交互逻辑。很多项目的动画代码写得像一团乱麻，改一个时长要在五个文件里搜索替换，这种动画即便效果再好看，也称不上合格。
第五点：体验为本，动画要服务于内容而不是抢戏
最后这一点最容易被忽视，却最能体现专业水准。动画的本质是引导注意力、解释界面变化、增强反馈感，而不是单纯炫技。一个合格的动画，时长通常控制在200毫秒到500毫秒之间，太短用户感觉不到，太长用户会觉得拖沓。缓动曲线要自然，避免生硬的匀速运动，ease-out适合元素进入，ease-in适合退出，弹跳效果要克制使用。
还要考虑特殊人群的需求。闪烁频率过高的动画可能诱发光敏性癫痫，持续循环且无法停止的动画会让使用屏幕阅读器的用户抓狂。给循环动画提供暂停入口，避免大面积高对比度的快速闪烁，这些细节体现的是产品的温度。
总结一下，性能流畅、兼容过关、响应式适配、可控可维护、体验为本，这五点构成了HTML5动画的基本合格线。做动画时不妨对照检查一遍，每一条都达标了，再做锦上添花的发挥也不迟。基本功扎实了，创意才有落脚的地方。