1

我正在尝试为一个项目开发幻灯片插件，但我遇到了 CSS3 动画/过渡的问题。

你可以在这里查看：http: //jsfiddle.net/75Sjb/

我正在尝试做的事情

  • 每张幻灯片都有transform: translate3d(-100%,0,0)和transition: all。这样，不活动的幻灯片就在视图之外，在左侧，并准备好平滑移动。

  • 活动幻灯片还有一个动画，其 from 部分transform: translate3d(100%,0,0)显示，以及其 CSS 中的一个新转换属性 as translate3d(0,0,0)。因此，它们的动画效果从恰到好处到紧贴在视图中。

问题

在 Webkit 中

尽管第一次选择幻灯片的动画是正确的，但之后的每一个幻灯片都是拙劣的。从活动到非活动的幻灯片不会动画出来。

在火狐中

在 Firefox 中，从活动到非活动的幻灯片很好；但活动幻灯片从左侧滑入（动画不起作用）。

4

1 回答 1

1

也许这是旧版本浏览器的问题，但动画现在运行良好。

于 2014-04-04T18:09:43.200 回答