在 bxSlider 项目上使用 CSS 转换会破坏 Safari 中的动画答案

【问题标题】：Using CSS transforms on bxSlider items break animation in Safari在 bxSlider 项目上使用 CSS 转换会破坏 Safari 中的动画
【发布时间】：2013-03-28 15:36:17
【问题描述】：

我在升级到最新版本的 bxSlider (v4.1) 时遇到了这个问题。新版本是响应式的，因此使用transform 在幻灯片之间切换，而不是使用left 属性的旧方式（在v3.x 中使用）。

我在这里创建了一个演示：http://jsfiddle.net/SXZjV/

在 Safari 5 中查看时，悬停在块上不会做任何事情。但是，当通过检查器禁用 -webkit-transform: translate3d(0px, 0px, 0px); 时，动画效果很好。

有没有办法让这两种变换协调工作？

非常感谢。

附：由于我目前正在运行 Snow Leopard，因此我尚未在 Safari 6 中测试此行为。

【问题讨论】：

标签： safari css-transforms bxslider translate3d

【解决方案1】：

在 Safari 5.1.9 中对我来说也是如此。我管理 CSS 动画工作的唯一方法是使用包括 "jQuery easing"：

 $('#bxslider').bxSlider({
      useCSS: false,
      easing: 'easeInBack' //Or other animation http://gsgd.co.uk/sandbox/jquery/easing/ 
  });

附：顺便说一句，它适用于 Safari 6 (Mountain Lion)

【讨论】：