我有一个响应式移动网站，我正在创建一个 CSS 汉堡菜单（一个滑出的面板菜单）。
我实现它的方式非常简单（我选择不使用任何现有框架）。它通过使用left .3s ease-in-out 处的transition 属性并操作left 属性来工作。
所有浏览器的性能都很差。这绝对是“可以接受的”，但并不完美。
不幸的是，到目前为止，所有我发现的脚本都具有同样缓慢的性能。例如This one 看起来不错，但速度很慢。
现在，有一个例外...THIS menu 以某种方式运行得如此惊人且完美流畅。完美无瑕……但我不知道他是怎么做到的。如果您没有看到菜单，请将浏览器缩小到出现为止。
他的 JS 和 CSS 真的严重破坏了我的网站，这就是我不能真正使用它的原因。甚至不值得修改他的代码。但我很想知道他的 CSS 的哪一部分真正让它如此流畅。
谢谢！
【问题讨论】：
将以下内容添加到您的导航中
transform: translateZ(0);
这将启动硬件加速并使过渡更加顺畅
你也可以通过添加来帮助它
transition: all 0.6s ease;
perspective: 1000;
-webkit-backface-visibility: hidden;
【讨论】：
perspective 和-webkit-backface-visibility 的帮助吗？
我认为您链接的第一个具有ease-out 的animation-timing-function，而您说的第二个非常平滑肯定是线性的。
这只是一个小建议，但请尝试更改您的代码
left .3s ease-in-out
到
left .3s linear
也许会有所帮助。
编辑：查看我为您制作的 jsfiddle，也许它可以帮助您确定哪个选项呈现最佳效果。
我在 Chrome 中得到了不同的结果。使用transform: translateX()函数，动画更流畅。在 Firefox 中，它们看起来都一样。
【讨论】：