我正在开发用于移动/触摸设备部署的HTML5应用程序，并且正在使用PhoneGap，目前只针对iOS平台（Webkit）。
我的问题出现在CSS3过渡中（并且它也适用于常规的jQuery动画），因为Webkit往往会做一些奇怪的事情。例如，在您浏览页面时可用于查看here（http://jsfiddle.net/lvl99/dSjcj/）的代码中，返回序列（即从第5页到第1页）将使动画呈现良好状态，无论如何向前迈进（即从第1页到第5页）将产生不一致的渲染，主要是在丑陋的一面（记得在Safari中查看它。我一直在使用Safari 5.1.7）。
我最初使用jQuery Mobile框架进行开发，但我使用的关键功能是通过主题标签和转换进行页面路由，但由于我遇到了转换的这些问题，我尝试开发一个更简单的解决方案以避免任何问题。 JS / CSS与jQM冲突。唉，我出现的错误可能实际上与Safari / Webkit有关。
我最初在左侧属性上使用jQuery.animate()，现在使用类似于jQM做事方式的CSS3 transform技术，也有助于提高速度并测试它是否更愿意渲染正常。两者都没有达到不同程度的不工作。
幸运的是，Firefox渲染一切都很好。它没有问题，但Firefox不是目标平台，当项目在PhoneGap环境中的Xcode中编译时，它表达了Safari与之相同的问题。当我还在使用早期开发版本的jQM时，Safari会将它渲染得很好（包括iPad模拟器上的Safari），但是UIWebView不会。这让我觉得也许这是一个Nitro JS引擎问题（也许是UIWebView没有速度/功能/能力来正确渲染过渡 - 我试图将所有动画转移到CSS3以降低渲染对GPU的操作。）
我使用了各种插件，例如jQuery Transit，jQuery Animate Enhanced和TransformJS。我也尝试在jQM中编写我自己的自定义转换处理程序并且它没有正确呈现（尽管它最接近：在Firefox和Safari中工作，而不是在UIWebView中）。
关于转换具有不同类型内容的元素，我也有不一致的结果：视频，图像，浮动元素，多个段落都是我测试过的。在某些阶段，过渡到/从序列的最末端（即1和5）也存在问题，但现在我的问题只是升序页面转换（即1到5）。
我花了好几天时间试图解决这个看似很小的问题，但这对于像这样的幻灯片转换的用户体验来说是非常不可或缺的，这些转换是基于用户在应用程序中移动的方向的上下文。最简单的解决方案是删除转换，但是如果有某种方法可以理解Webkit / UIWebView究竟遇到什么问题，那就为它创建一些解决方案。这无疑与jQM过渡经历的闪烁问题有关。网上建议的那些人的许多CSS修复都不起作用，例如-webkit-backface-visibility: hidden并设置默认转换属性-webkit-transform: rotateX(0)。
答案 0 :(得分：2)
看起来问题是它没有动画右边的下一个项目（当向上移动1-> 2＆gt; n时），而是在前一个项目完成后只是'.show（）'动画出来。
Gimme一秒钟，逐步完成.js
...
好吧，我想我知道它是什么，它正在做什么，当它从右向左移动（数字上升）时你看不到从左边进来的新页面（更高的数字） ，因为'左'从100％移动 - ＆gt; 0％，因为较小的数字正在移出。
好的，我认为那是错的......
如果您在100%和92.5%声明中将@-webkit-keyframes slideinleft更改为@-moz-keyframes slideinleft，那么它应该适合您，遗憾的是我无法告诉您为什么（工作）避免CSS转换，因为我们做了很多公司工作，因此仍然需要支持IE7 +，有时甚至需要支持6 :(
请注意，您可以尝试92.5%以外的其他值我只想找到对您有用的最低敏感值（95%不起作用）