CSS3 跳跃动画？答案

【问题标题】：CSS3 Jumpy Animations?CSS3 跳跃动画？
【发布时间】：2014-03-21 13:20:55
【问题描述】：

我正在创建一个简单的 CSS3 滑块。在进行两种不同的属性转换时，特别是transform: scale3d 和left，动画首先进行转换，然后跳转到左侧。

只有在动画完成时才会发生跳转。换句话说，如果您连续单击下一部分，则过渡是平滑的。

我制作了一个 jsFiddle，它似乎可以在 jsFiddle 上按我想要的方式工作：http://jsfiddle.net/BdG4k

基本上，这是我的代码格式：

#slider > * {
    margin-left: -270px;
    position: absolute;
    -webkit-transition: all 1s;
}
#slider .module.leftX {
    left: XX%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}

注意：我只在使用 -webkit 之前使用它。然后我将添加 -moz 和 -ms。

【问题讨论】：

请隔离问题，在此处发布代码，以及重现您遇到的特定问题的演示。
不要发布网站链接，请将您的 HTML、js 或 CSS 代码发布到 jsbin.com 或使用 jsfiddle。
我发布了jsfiddle。
谢谢 Aaron，你能看看我的建议吗？

标签： javascript jquery css animation

【解决方案1】：

Aaron 的问题是您使用的 transform 属性仅适用于 webkit 浏览器。

在您的 js 文件 slider.js 中，您仅使用 chrome 特定的供应商前缀 -webkit。尝试为 Firefox 也为 IE 添加 -moz 前缀。

$('#slider').ready( function() {
function slide(focus) {
var l1css = {
'opacity': 0.8,
'-webkit-transform': 'scale3d(0.5, 0.5, 1)',
'-moz-transform': 'scale3d(0.5, 0.5, 1)', /*for Firefox*/
'transform': 'scale3d(0.5, 0.5, 1)', /*for IE*/
'margin-left': '-135px',
'left': '19%'
};

请检查工作Demo

【讨论】：

糟糕。我忘了删除那个。那是我曾经拥有的代码。目前，我有相同的 CSS，但是，我只使用 -webkit 直到它工作，然后我将添加 -moz 和 -ms。
查看我的演示，我也添加了供应商前缀，现在流畅的动画正在 FF 和 IE 上运行。
它变得更好了。在我的网站上，它仍然在做同样的事情，但只针对第一次点击。你知道为什么会这样吗？
我看到动画上的图像在 FF 中运行良好。由于滚动条问题，在 IE 中闪烁。
如果您将 div ID #portfolio 包装在另一个 div 中并将 position:relative 给该 div 怎么办？