css - 为移动设备优化繁重的网站 CSS3 动画

Question

我正在开发一个包含大量 CSS3 动画(关键帧)的响应式网站。
尽管它在桌面 Chrome 浏览器中运行良好，但该网站对于移动设备来说太重了，它的浏览器会崩溃，甚至有时会重启设备，哈哈。

我是响应式动画和 CSS 动画的新手，希望得到您的帮助来优化动画，以便它们可以在移动设备上运行而不会崩溃。

我已经将所有动画(关键帧)从使用顶部/左侧位置更改为转换 translate3D。我还将动画播放状态默认设置为“暂停”，只有当您到达元素区域时(当它在视口(viewport)中时)才将其更改为“运行”。
请问我还能做什么？或者，我对此无能为力，应该始终暂停移动设备上的动画吗？

欢迎大家笼统的回答我，或者访问下一个链接中的站点——
* 请勿在手机中打开它，它可能会重启您的设备! *
在最新的Chrome或Firefox中打开它:http://goo.gl/BVsVH7

同样，我对响应式和移动都是新手，我不知道我应该做什么，不应该做什么。

Answer 1

我认为今天很难让它在移动设备上很好地工作。

我在 google pagespeed 上运行了你的网站，有很多东西你可以做得更好。将您的网址粘贴到此处，您将获得大量优化提示。

Google PageSpeed Insights