如果你确实要求独特的体验并且你希望它基于滚动或者其他的特殊事件，我建议创建一个快速原型来实现，而不是费力不讨好地去设计事件形式。

　　9、尽早并且经常地在移动设备上的测试。

　　大多数的网站都是在电脑上搭建的，并且最常用本机做测试。因此，移动端体验和动画性能就被次要考虑了。一些技术(比如 canvas)或者动画技术可能在移动端表现地并不好。

　　然而，如果代码写得好优化也到位(参考规则 #1)，移动端的体验甚至比电脑更加流畅。移动端的优化是一项非常棘手的事情，但是新的 iPhone 比手提电脑更快!如果你采用了前几项建议，你将会得到一个非常棒的移动端表现。

　　移动端访问网站将会变得非常非常的重要。我建议你专门拿一个星期的时间认真地用手机查看你的网站，这或许有些极端，你可能会感觉像是在接受惩罚而被迫使用移动端版本，但是你应该调整好心态。

　　不断优化设计和提高性能，直到网站在移动端的表现和在电脑上一样优美和方便。

　　如果你坚持一周都用移动端来访问网站，你将会得到一个比电脑上更优化体验更好的网站。即使在使用过程中遇到非常恼人的事情也是值得的，那意味着这些问题将在你的用户体验到之前就被解决掉了!

　　10、经常在不同的设备上测试，不同屏幕尺寸、分辨率，或者有着各种样式的设备

　　除了移动端和电脑之外还有很多因素能够对性能产生极大的影响，比如是否是 “retina” 屏幕、窗口的分辨率、硬件的老旧程度等等。

　　即使 Chorme 和 Safari 都是基于 Webkit 的浏览器并且有着相似的语法，但是他们也有各自的特点。每一次 Chrome 升级都会修复一些问题同时也会引入新的 bug，所以你必须时刻保持警惕。

　　当然，你不会只想着搭建一个对于所有浏览器放之四海而皆准的网站，所以寻找一个灵活的方法以便于你能够增加或者移除一些功能是非常有用的。

　　我通常会交替在较小的 MacBook Air 和大屏的 iMac 中使用网站，每次都会暴露出新的问题然后再修复 — 尤其是动画性能方面的问题，有时候也会有全局设计的题、信息密度、可读性的问题等等。

　　Media queries 是一款非常强大的工具，它典型的用处是定位由于高度或者宽度造成的样式差异，但是它同样能够用来根据分辨率添加目标内容或者其他属性。另外，识别系统和设备类型的功能也是非常有用的，因为移动设备的性能特征和电脑还是有很大区别的。

　　原文：10 principles for smooth web animations