CSS3动画和过渡不顺畅

时间:2013-05-21 20:21:06

标签: css3 firefox animation webkit

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

您可以在此处查看: http://jsfiddle.net/75Sjb/

我正在尝试做什么

  • 每张幻灯片同时包含transform: translate3d(-100%,0,0)transition: all。这样,非活动的幻灯片就在视图之外,向左,并准备好顺利移动。

  • 活动幻灯片还有一个动画,其部分显示transform: translate3d(100%,0,0),并且CSS中的新转换属性为translate3d(0,0,0)。因此,他们从正确的角度动画到在视野中紧贴。

问题

在Webkit中

虽然第一次选择幻灯片是正确的动画,但之后的每一个都是拙劣的。幻灯片从活动状态变为非活动状态不会动画显示。

在Firefox中

在Firefox中,幻灯片从活动状态变为非活动状态很好;但是活动幻灯片从左侧滑入(动画不起作用)。

1 个答案:

答案 0 :(得分:1)

对于旧版本的浏览器来说,这可能是一个问题,但动画现在工作正常。