我一直在制作一个幻灯片脚本，该脚本使用CSS3转换，或者在不可用时使用jQuery的动画。我创建了一个自定义函数来制作幻灯片动画，这样做很合适。一切似乎都很好，但我在测试过程中遇到了一个重大障碍。
出于这样或那样的原因，在大型幻灯片的转换前后应用jQueryCSS会有很大的延迟。例如，下面链接中的幻灯片宽度约为9900像素(容器宽度，大部分隐藏)。使用CSS3转换和变换属性操纵容器以显示适当的幻灯片。延迟发生在下面粘贴的第75-82行之间应用CSS。特别是，应用"transition"CSS会导致问题。将"transition"CSS添加到样式表中(而不是将其与JS一起应用)，延迟就会消失。然而，这并不是一个真正的解决方案，因为我们只想在特定的属性上使用CSS3转换，这可能会有所不同(在样式表中使用"all"会转换一些我们不想动画化但会定期更改的CSS)。
动画功能：http://pastebin.com/9wumQvrP
幻灯片演示：http://www.matthewruddy.com/demo/?p=2431
真正的问题是iOS，在iOS中，幻灯片(有时甚至浏览器)变得完全不可用。我无法精确定位任何错误，并且已经耗尽了调试JS的知识。经过一段时间的尝试，我确信它与该函数的这一部分有关，并且在插件中禁用CSS3支持完全消除了这个问题。
我完全陷入困境，非常感谢任何人能给予我的帮助。
---编辑---
我尝试过用原生Javascript而不是jQuery的.CSS函数来应用CSS。同样的结果，没有更好的性能。同样值得注意的是，这在Firefox中根本没有发生，而且似乎只是Webkit浏览器的问题。
任何有解决方案的人，都很乐意为几杯啤酒捐款！我真的想不通！
---第二次编辑---
好的，经过调试，我可以看到速度减慢是由浏览器重新绘制周期引起的，这需要很长时间。有没有比现在更好的方法来处理这个问题？绝对定位元素是减少重新绘制的一种已知方法，但这并没有真正起作用，因为幻灯片是有响应的。绝对定位幻灯片图像或幻灯片本身会导致其塌陷。
---第三次编辑-
一天后，我取得了一些进步。在元素样式表CSS中添加"transition:all0s ease"，消除了通过原始文章中提到的自定义动画函数添加内联CSS transition属性所导致的重新绘制。这会带来显著的性能提升，尤其是在转换本身完成后删除内联CSS转换属性时。
好东西！然而，现在，当内联CSS转换在转换后被删除(用于创建硬件加速转换效果本身)，并且应用左侧定位时，仍然会出现速度减慢的情况。当两者同时发生时，经济就会放缓。
将它们分解为两个独立的任务(移除平移，然后在没有指定时间的setTimeout中添加左侧位置)，再次消除了重新绘制=性能提升，看起来问题已经解决。但有时，CSS转换属性的否定速度不够快，转换删除也会被动画化。不好，不知道下一步该去哪里解决。
我认为问题是你正在加载巨大的图像：)
它们对于您放置的容器来说太大了，所以您可以缩小它们的规模，这将更加耗费资源。
试着调整它们的大小。
首先祝贺您的调试！我最近一直在做同样的事情，发现ios设备不支持在同一页面中放置大量图像。它会导致崩溃，我找到的唯一解决方案是删除元素，而不仅仅是隐藏它们。不利的一面是，删除和附加元素会导致滞后，所以在完成转换时，必须巧妙地执行。我认为最好的方法是在DOM中保留3或5个图像，并用图像的缩略图替换其余图像，调整大小以适应原始图像。当过渡完成后，我会把大图像放回原位。。。希望这至少能在ios问题上对你有所帮助。。。
在花了一些时间用Chrome开发工具分析代码TimeLine之后，我相信你可以做一些优化。
据我所知，每次请求动画时，16张图像中的每一张都会被完全重新绘制。这对我来说似乎很明显，因为在你的例子中有16个图像，Chrome开发工具每次在点击"Next"时都会报告16个长的"Paint"执行。
在我看来，你应该想出一个只考虑翻译两个图像的解决方案：你想隐藏的图像和你想展示的图像。因此，请考虑不要移动其余的图像，而是将它们并排放置在显示的图像旁边。
还有一件事，使用缩小的图像可能会使绘制周期更长。尽可能避开它们。
好吧，我想我已经想好了！正如您所知，原始的post链接并不能像我在本地主机环境中所做的那样反映这些更改。
幻灯片容器的绝对定位已经解决了在转换发生后重新绘制速度出现的问题(同时应用CSS属性)。显然，将它们从DOM中移除已经达到了目的，可以更有效地进行绘制。
我最初没有尝试太多，因为我知道这会给调整大小的功能增加很多工作。我原本打算在JS中根本不调整大小，而是依靠百分比来做脏活。完全定位容器会导致幻灯片放映视口塌陷，从而使本机调整大小变得毫无用处。
然而，无论如何，我在其他浏览器中的亚像素渲染已经遇到了问题，所以我想是时候咬紧牙关，依赖固定的像素值了。然后，我使用JS来处理大小调整，使用窗口大小调整事件。一切看起来都很好，但幻灯片仍然由于定位而崩溃。指定高度值不正确，所以有点不知所措。
值得庆幸的是，我发现了一个巧妙的小技巧，将幻灯片放映视口的"填充顶部"设置为一个百分比值，该值是动态计算的(所需的幻灯片放映高度，在该脚本的设置面板中设置，除以所需的宽度)。由于填充顶部百分比相对于元素的宽度，因此这在提供响应高度和再次校正视口(不再看起来塌陷)方面做得很好。
以下是一些关于为保持纵横比的响应元素使用填充顶部的信息。伟大的小把戏：http://f6design.com/projects/responsive-aspect-ratio/
现在一切都很好，iOS和webkit浏览器运行良好。一切都非常迅速，并且正常工作。四天后，事情终于解决了。不高兴不得不求助于JS来调整大小，但我想这总是会发生，因为浏览器之间的百分比不一致。小数太多=不好！
感谢所有试图为我指明正确方向的人。这无疑让我思考，并学到了很多调试技巧，我可以再次使用这些技巧来确保转换效果良好。再次感谢！
不确定这是否有帮助，但我注意到你使用了3d翻译-我认为简单的2d翻译就足够了，尤其是因为你的第三个参数是0，可能会加速问题，也会像Armel L.建议的那样使用更少的图像，不过没有iphone可以测试。。。或者，这是我在css3之前使用的解决方案，但应该仍然可以通过向左修改(？和顶部-演示只向左和向右移动？没有过渡效果)来使用javascript移动包含图像的元素，这样你就可以微调刷新率，我认为这可能是速度减慢的原因。。。你可以在没有人注意到的情况下低至18帧/秒，甚至只需16帧/秒的就足够了
当我第一次设计杂志转盘式页面设备时，我就有了这个。
如果你在一个长的"托盘"中有一系列的图像，即使它们不在视口中，它们仍然会占据ram，在泄漏和肮脏开始发生之前，你可以有效地有五个左右的图像。
我发现的作品是"隐藏"它们。。。但要确保它们占据了必要的物理空间。
我还发现有效的方法是，可以使"上一个"当前和"下一个"图像可见，并移动托盘，当它们到达这三个位置时"取消隐藏"它们。
在我自己的系统中，我跳过了保存e图像的"托盘"，只将它们设置为-100%宽、100%宽，当前的图像为0。
我从来没有太幸运的典型的长托盘旋转木马与大规模背景图像。。。尤其是css3的加速。