Css 背景位置动画表演

我想用我的移动设备穿越太空。我想用CSS来做

因此，我创建了一个漂亮的spacey图像，当用户浏览时，它会在我的页面背景中缩放

问题出在哪里？它使东西过热。这有点奇怪，因为到目前为止，我测试的设备的速度是50-60fps。这包括iPhone3GS、iPhone4、iPhone5，甚至我的视网膜MacBookPro

所有这些设备最终都会过热，甚至导致我的电脑在两三分钟后将风扇转速提高到最大值

我正在寻找提高这部动画性能的建议，或者是在手机上获得同样效果的替代方案

谢谢

body {
    background-image: url('omg_space.jpg');
    animation: warp-speed 20s linear infinite reverse;
}

@keyframes warp-speed {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 1000px; /* height of the background image */
    }
}

---

这里有一个代码笔的例子：

是的，我愿意：。这不是一个编程问题，有一个不同的地方可以问优化问题。然而，我不确定iPhone/iPad是如何工作的，但有可能他们正在使用图形处理器来渲染这个动画图像，这会使它们发热。@Banana:关于CSS的问题在这里已经讨论了很久了。考虑到代码造成的极端情况，我不认为这是你的常规优化问题——或者说，这是一个关于工作代码的问题。你在rMBP上用哪些浏览器测试过这个问题？@BoltClock我从来没有说过关于css的问题是离题的。他的代码工作得非常好，而升温是由于iPhone的缺陷造成的，这使得它成为一个硬件问题，而不是编程。@BoltClock我已经在我的MBP上用Chrome、Firefox和Safari测试了这一点，都得到了类似的结果。我也在我们开发的安卓设备上测试了它，它的性能稍好一些，但我们80%的移动通信量是iOS。